<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!-- 328lect07-1.html: to style by our CSS external style sheet during Week 7 Lecture 1, on Monday, March 2, 2026 (and added to a bit after class) by: Sharon Tuttle last modified: 2026-03-04 you can run this using the URL: https://nrs-projects.humboldt.edu/~st10/s26cs328/328lect07-1/328lect07-1.html --> <head> <title> 328lect07-1 </title> <meta charset="utf-8" /> <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css" type="text/css" rel="stylesheet" /> <link href="328lect07-1.css" type="text/css" rel="stylesheet" /> </head> <body> <h1> MORE Playing with CSS </h1> <p> Jump right to the <a href="#cs328">CS 328</a> subsection. </p> <p> This will be used to demonstrate some more aspects of CSS. </p> <p> We may 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 class="eyecatching"> 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 id="cs328"> CS 328 </h2> <p> A blurb about CS 328 could go here... </p> <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="eyecatching"> They might design a form to get this information - which we will lay out using CSS! (More on that soon!) </p> <form action="https://nrs-projects.humboldt.edu/~st10" method="get"> <fieldset> <legend> a silly demo form </legend> <p> <label for="username"> Campus username: (7 chars max) </label> <input type="text" name="hum_name" id="username" size="10" maxlength="7" required="required" pattern="[a-z]+[0-9]+" /> </p> <fieldset> <legend> PL/SQL subroutines </legend> <p> <input type="radio" name="plsql_sub" id="procedure" value="proc" /> <label for="procedure"> Procedure </label> </p> <p> <input type="radio" name="plsql_sub" id="function" value="funct" checked="checked" /> <label for="function"> Function </label> </p> <p> <input type="radio" name="plsql_sub" id="trigger" value="trig" /> <label for="trigger"> Trigger </label> </p> </fieldset> <fieldset> <legend> PL/SQL Optional Parts </legend> <p> <input type="checkbox" name="param" id="parameter" /> <label for="parameter"> Parameters </label> </p> <p> <input type="checkbox" name="loc_dcl" id="local_decl" checked="checked" /> <label for="local_decl"> Declaration Block </label> </p> <p> <input type="checkbox" name="exc" id="exception" /> <label for="exception"> Exception Block </label> </p> </fieldset> <p> <label for="secret"> Secret word: (10 chars max) </label> <input type="password" name="secret_word" id="secret" maxlength="10" /> </p> <p> <label for="comfort_lvl"> Describe your current comfort-level with PL/SQL: </label> <br /> <textarea name="comf_lvl" id="comfort_lvl" placeholder="Start typing here" rows="5" cols="40"></textarea> </p> <p> <label for="plsql_feature"> Choose a PL/SQL language feature to describe: </label><br /> <select name="feature" id="plsql_feature"> <option value="print"> dbms_output.put_line </option> <option value="assn"> assignment statement </option> <option value="into"> INTO clause </option> <option value="if" selected="selected"> if statement </option> <option value="while"> while loop </option> <option value="for"> for loop </option> <option value="coltype"> %TYPE </option> <option value="cursor_decl"> cursor variable </option> <option value="cursor_loop"> cursor-controlled loop </option> </select> </p> <input type="submit" value="submit form" /> </fieldset> </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> </footer> </body> </html>