<!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 9, 2026 by: Sharon Tuttle last modified: 2026-03-09 you can run this using the URL: https://nrs-projects.humboldt.edu/~st10/s26cs328/328lect08-1/328lect08-1.html --> <head> <title> Spring 2026 - CS 328 - 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> <h2> A <code>table</code> element to be styled </h2> <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> <h2> CSS Flexbox Demo </h2> <p> Trying out CSS flexbox layout! </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> <form action="https://nrs-projects.humboldt.edu/~st10" method="get"> <label for="hungry"> What are you hungry for? </label> <input type="text" name="hungry" id="hungry" /> <div class="submit-div"> <input type="submit" /> </div> </form> <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> <p> Validate CSS by pasting external CSS's URL into<br /> <a href="https://jigsaw.w3.org/css-validator/"> https://jigsaw.w3.org/css-validator/ </a> </p> </footer> </body> </html>