<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!-- by: last modified: you can run this using the URL: --> <head> <title> CS 328 - Lab 7 </title> <meta charset="utf-8" /> <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css" type="text/css" rel="stylesheet" /> </head> <body> <h1> A Few CSS Tidbits </h1> <p class="caveat"> Here is just a <em>little</em> bit about CSS, Cascading Style Sheets. </p> <h2 id="cascading"> Cascading order </h2> <p> Remember, CSS is executed in the <strong>client</strong> tier! Typically, a <strong>browser</strong> will be executing it, formatting and styling a given document based on CSS rules. </p> <ol> <li> Browser default </li> <li> External style sheet </li> <li> Internal style sheet </li> <li> Inline style sheet </li> </ol> <p> That is, </p> <ol> <li> First, the browser's default styles are applied. </li> <li> Then, if there are any external style sheets specified, their rules are applied, in the order that the external style sheets' <code>link</code> elements appear in that document's <code>head</code> element. </li> <li> Then, if there are any internal style sheets specified, their rules are applied, in the order that the internal style sheets' <code>style</code> elements appear in that document's <code>head</code> element. </li> <li> Then, if there are any inline style sheets specified, their rules are applied to the element in whose <code>style</code> <em>attribute</em> they appear, in the order they appear. </li> </ol> <p class="caveat"> It <strong>can</strong> get more complicated than this, especially if some of the rules' declarations conflict! There is <em>some</em> discussion of this in the zyBooks course text, in Chapter 3, near the end of Section 3.1. </p> <h2 id="color_options"> Color options in CSS </h2> <p> You can read more about CS color options in the zyBooks course text, in Chapter 3 - Section 3.4. This section also includes a color picker! </p> <p> There are also additional CSS-color-related references in the CSS 328 posting <a href="https://nrs-projects.humboldt.edu/~st10/s25cs328/css-refs.php"> "A Selection of CSS References"</a>, some of which you will be using in Homework 6. </p> <p> As a reminder, here are several of the ways to specify colors in CSS: </p> <ul class="syntax_related"> <li> predefined color name - for example: <code>red</code> </li> <li> hexadecimal color code - for example: <code>#ffa500</code></li> <li> red-green-blue color code - for example: <code>rgb(255, 165, 0)</code> </li> <li> hue-saturation-luminance code - for example: <code>hsl(128, 128, 64)</code></li> <li> semi-transparent red-green-blue-alpha color code - for example: <code>rgba(255, 165, 0, 0.5)</code></li> </ul> <p class="caveat"> In Homework 6, you will consider how color can affect the <strong>accessibility</strong> of a document. </p> <footer> <hr /> <p> by: YOUR NAMES </p> <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 your CSS by pasting your .css's URL into<br /> <a href="https://jigsaw.w3.org/css-validator/"> https://jigsaw.w3.org/css-validator/ </a> </p> </footer> </body> </html>