<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!-- 328lect08-2.html: to style by our CSS external style sheet built during Week 8 Lecture 2, on Wednesday, March 12, 2025 by: Sharon Tuttle last modified: 2025-03-12 you can run this using the URL: https://nrs-projects.humboldt.edu/~st10/s25cs328/328lect08-2/328lect08-2.html --> <head> <title> 328lect08-2 </title> <meta charset="utf-8" /> <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css" type="text/css" rel="stylesheet" /> <link href="328lect08-2.css" type="text/css" rel="stylesheet" /> </head> <body> <h1> MORE Playing with CSS </h1> <p> This will be used to demonstrate some more aspects of CSS. </p> <p> We will demo making tables look better today, also - for example: </p> <table> <caption> examples of good Arcata things </caption> <tr> <th scope="row"> ice cream </th> <td> Arcata Scoop </td> </tr> <tr> <th scope="row"> chocolate </th> <td> Drake's Glen </td> </tr> </table> <h2> Style Sheets </h2> <p> Kinds of style sheets: </p> <ul> <li> inline style sheet - <code>style</code> <strong>attribute</strong> within an HTML element's opening tag </li> <li> internal style sheet - <code>style</code> <strong>element</strong> inside the <code>head</code> element </li> <li> external style sheets - imported into an HTML document using a <code>link</code> element inside the <code>head</code> element </li> </ul> <h2> Basic Cascading Order </h2> <ol> <li> Browser default </li> <li> External style sheet </li> <li> Internal style sheet <ul> <li> LOOKY </li> <li> WOW </li> <li> OH GOLLY </li> </ul> </li> <li> Inline style sheet </li> </ol> <h2> Why find out someone's preferences? </h2> <p class="eyecatching"> A group would like to know more about someone's preferences. Why? There could be so many reasons, including: </p> <ul class="persuasive"> <li> choosing beverages to provide at meetings </li> <li> determining acceptable t-shirt colors </li> <li> designing a character for a game or a project mascot </li> </ul> <p class="center eyecatching"> They might design a form to get this information - which we will lay out using CSS! (More on that soon!) </p> <div class="flex-demo"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> <div class="grid-demo-1"> <div class="one">G One</div> <div class="two">G Two</div> <div class="three">G Three</div> <div class="four">G Four</div> <div class="five">G Five</div> <div class="six">G Six</div> </div> <footer> <hr /> <p> Validate by pasting .xhtml copy's URL into<br /> <a href="https://validator.w3.org/nu"> https://validator.w3.org/nu </a> or <a href="https://html5.validator.nu/"> https://html5.validator.nu/ </a> </p> </footer> </body> </html>