About Cascading Style Sheets

Separating the format

A web page can be broken down into content, structure and format. CSS helps to separate the format information from the data on the page. This makes web page design much easier to control. An entire site can change its colour, font and page positioning just by modifying the style sheet. This will also speed up the download time by reducing the amount of code required to render the page.

The Cascade

In the same way a water fall will cascade over rocks can be likened to the way CSS works. A site CSS file may influence every page that it is linked to but an embedded style will overpower the linked one and in turn a native html style applied directly to the element will over rule both. Quite often results are not what was expected and this may due to a further set of conflict rules

Cascading Order

In CSS more than one style sheet can influence the presentation of a document. The reason for this is modularity and author/reader balance. When multiple style sheets are used, they may conflict over control of a particular element. In these situations, there must be rules as to which style sheet's rule will win. The following characteristics will determine the outcome of contradictory style sheets.

 

! Important

Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance.

A sample use of the ! important statement:

body { background-color: #FFFF66 ! important}

Origin of Rules

(Author's vs. Reader's) As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.

 

Specificity

Style sheets can also override conflicting style sheets based on their level of specificity, so if two styles conflict, one of which has been used 10 times and the other has only been used 3 times, the 10 timer will win. If both are specified the same number of times then the last rule specified wins.