Styles

Terms

CSS - Cascading Style Sheets.
It is called "Cascading" because styles are defined in a hierarchical structure. A top-down arrangement. A cascading effect.

External Style Sheet - top level - Global. Most commonly used and most powerful method of using styles. Styles are stored in an external file that can be used by all html files in a web site.

Internal Style Sheet - middle level. Styles are stored in the <head> section of an html document file. Styles defined here are applied to the entire document, but cannot be seen in other documents.

Inline Style - bottom level - Local. Styles are defined and used right at the point where they are needed, as a part of an individual html tag. These types of styles are used where a special effect is needed only once.

Precedence

Styles have a precedence of the order of which they take effect.

External style sheets are loaded.
Internal style sheets are loaded.
Inline styles are loaded.

If there are conflicting styles loaded, the most local style has precedence over a style that is global.

So a web programmer may define an external style sheet that fits the needs for 95% of the site.

If there needs to be an override of a style on a single page, 4%, the author may override the external style sheet with a more local style with an internal style sheet.

And in those rare instances, a very infrequent style, the remaining 1%, needs to be applied, an inline style can be used.

Selector and Declaration

selector {declaration}

A declaration consists of two parts, a property and its associated value, separated by a colon.
{property:value;}

Multiple property - value pairs must be separated with a semicolon.
{property1:value; property2:value; property3:value;}

So when put together
selector {property1:value; property2:value; property3:value;}

A real example:
h1 {color:red; background:yellow;}

The last semicolon is optional, but most people include it for consistency.

For readability, most of the time the property:value pairs are put on seperate lines:

selector {
    property1:value; 
    property2:value; 
    property3:value;
}

Comments in a style sheet

You should add comments to style sheets to document your work.

Textual comments in CSS are similar to those in the C / Java / PHP programming languages:

b {color:red;} /* bold text is red, really red!! */

Anything between the opening comment '/*' and the closing comment '*/ is ignored by the browser.

Also comments can span several lines:

/* Assignment Lab9
Author: John Doe
Things to do: Change bold text from red to blue */

Example of a well documented style sheet:

/* Lab Assignment X - John Doe */
/* Showing some contrast with <h2> tags */ 
h2{color:green;}  .demo1 b {color:blue; background:yellow;}  

/* This makes a banner at the top that has a nice appearance. */ 
#banner{color:blue; background:#BFE2F9;}  
a:link {color:green;}    /* unvisited link */ 
a:visited {color:lime;}  /* visited links (are listed in the browser history)*/ 
a:focus {color:orange;}  /* link that would be selected if enter was pushed */ 
a:hover {color:red;}     /* link that has cursor over the top and would be  
                            selected if mouse button was clicked*/ 
a:active {color:red;}    /* active link (has been selected) */  

/* End of style sheet */