A Few CSS Tidbits

Here is just a little bit about CSS, Cascading Style Sheets.

Cascading order

Remember, CSS is executed in the client tier! Typically, a browser will be executing it, formatting and styling a given document based on CSS rules.

1. Browser default
2. External style sheet
3. Internal style sheet
4. Inline style sheet

That is,

1. First, the browser's default styles are applied.
2. Then, if there are any external style sheets specified, their rules are applied, in the order that the external style sheets' link elements appear in that document's head element.
3. Then, if there are any internal style sheets specified, their rules are applied, in the order that the internal style sheets' style elements appear in that document's head element.
4. Then, if there are any inline style sheets specified, their rules are applied to the element in whose style attribute they appear, in the order they appear.

It can get more complicated than this, especially if some of the rules' declarations conflict! There is some discussion of this in the zyBooks course text, in Chapter 3, near the end of Section 3.1.

Color options in CSS

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!

There are also additional CSS-color-related references in the CSS 328 posting "A Selection of CSS References", some of which you will be using in Homework 6.

As a reminder, here are several of the ways to specify colors in CSS:

• predefined color name - for example: red
• hexadecimal color code - for example: #ffa500
• red-green-blue color code - for example: rgb(255, 165, 0)
• hue-saturation-luminance code - for example: hsl(128, 128, 64)
• semi-transparent red-green-blue-alpha color code - for example: rgba(255, 165, 0, 0.5)

In Homework 6, you will consider how color can affect the accessibility of a document.