<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!-- 328lect08-1.html: to style by our CSS external style sheet built during Week 8 Lecture 1, on Monday, March 10, 2025 by: Sharon Tuttle last modified: 2025-03-10 you can run this using the URL: https://nrs-projects.humboldt.edu/~st10/s25cs328/328lect08-1/328lect08-1.html --> <head> <title> 328lect08-1 </title> <meta charset="utf-8" /> <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css" type="text/css" rel="stylesheet" /> <link href="328lect08-1.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> <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>