MMDT1021 Chapter 7 Notes - page 1

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.


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

  1. External style sheets are loaded.
  2. Internal style sheets are loaded.
  3. 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 {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.


Constructing a Style Rule

This is done by just specifying the name of the tag we want to control.
Code Page
Controlling the colors of h1, h2, and h3. Result
Source
Don't forget the ";" semicolons separating the property:value pairs  If you do, the page will not display correctly.  Here is an example of what happens when forgetting the semicolons. Result
Source