The Cascade

There are more than one creator of style sheets for a document. Since style sheets from different creator may overlap in scope, the cascading technology is used in CSS by assignning a weight to each style rule for determining the precedency of each style rule.

Normal and Important Rules

By default, all rules are normal rules and rules in author style sheets have more weight than rules in user style sheets, while rule in user agent style sheets has the least weight.. The one with the greatest weight takes precedence. In order to provide a way to overide the default cascading order, a type of important rule are defined in addition to normal rules by adding the flag with delimiter token '!' and keyword 'important' follow a norml rule declaration.

h1, h2 { font-weight: bold !important}
p { font-weight: bold !important;font-size: 12px }

Cascading Order of Creator

Both user and auther important rules have more weight than normal rules in the default style sheet of author, user, and user agent. And all user important rules have more weight than author important rules.

The decending order of precedence for creator:

user important declarations
author important declarations
author normal declarations
user normal declarations
user agent declarations

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet" type="text/css" href="http://output.to/style/default/std01b.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
h2 {background-color:cyan;color:blue}
p {background-color:cyan;border:1px solid black;margin:5px;padding:5px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h2 style="color:red; color:black">Example of direct CSS Rule</h2>
<p style="background-color:green;color:red;background-color:cyan">Example of indirect CSS Rule</p>
    </body>
</html>

HTML Web Page Embedded Output:

Specificity of Selector

Not CSS Specification Related

Besides creator, CSS rules of the same element selector may aslo be sepecified in style sheets of different types or different pattern. By default, a more specific element selector have more weight than less specific element selector. The specificity is based only on the form of the selector. However the ',' used in the selector is only a logical partten separator to combine two or more rule sets of the same declarations together. The weight of specificity and the order of precedence for an element in decenting order are:

The highest specificity: count 1 if the declaration is from a 'style' attribute rather than a rule with a selector, otherwise count 0.
High specificity: count the number of ID attributes in the selector.
Less specificity: count the number of other attributes and pseudo-classes in the selector.
The least specificity: count the numbe of element names and pseudo-elements in the selector
No specificity: count 0 if the selector is '*'

Order of Rule Sets

In general, the property value of a valid styling rule will be overridden by the property value of the later valid styling rule in CSS. In other words, the later styling rule will have more weight than that of the styling rules loaded before in the CSS list.

Cascaded Style Rule Order

In general, there are two types of author rule sets.

Inline Style (inside an HTML element)
External Style Sheets and Embedded Styles (in the head section)

The inline style attribute will always has the highest specificity. If there are duplicate CSS rules inside the style attribute, the latest specified CSS rule in the list will always override the other specified CSS rule of the same property name. But for other style rule sets, the specificity of each style rule set is obtained by counting the number of items in the selector, these selectors may have more than one type of specificity. The specificity order can then be arranged by comparing the hierarchy of specificity weighting. If there are more than one selector of the same specificity weighting, the order of rule will then applied, that is the latest specified CSS rule in the CSS list will always override the other specified CSS rule of the same property name.

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {background-color:transparent;width:auto}
del, strong {background-color:inherit;color:inherit;border-width:0;margin:0;padding:0}
q {background-color:inherit;color:inherit;border-width:0;margin:0;padding:0}
* {background-color:cyan;color:blue;border:1px solid blue;margin:5px;padding:5px;}
p {background-color:pink;border:3px solid;margin:5px;padding:15px;text-align:justify;}
p::first-line {background-color:silver;border:10px solid black;margin:15px;padding:15px;text-align:left}
div p {background-color:blue;color:yellow}
div p+p {background-color:black;border:16px solid}
p + *[txt=org] {background-color:green;color:orange}
div p+p.green {background-color:green}
p.red.level {background-color:violet;color:yellow}
#hot1 {background-color:orange}
.cba {color:violet}
.ab {background-color:orange;color:green}
.ba {background-color:yellow}
.abc {color:orange}
</style>
<title>Sample Page</title>
    </head>
    <body>
html, body:- html, body {background-color:transparent;width:auto}; * {<del>background-color:cyan;</del>color:blue;border:1px solid blue;margin:5px;padding:5px;}
<h2 style="color:red; color:black">h2 style="<del>color:red;</del>color:black":- * {background-color:cyan;<del>color:blue;</del>border:1px solid blue; margin:5px;padding:5px;}</h2>
<p>p:- p {background-color:pink;border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; </del><strong>color:blue</strong>;<del>border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p style="background-color:green;color:red;background-color:yellow">p style="<del>background-color:green;</del><strong>color:red;</strong>background-color:yellow":- p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<div class="red">div <del>class="red"</del>
<p>p:- div p {background-color:blue;<strong>color:yellow</strong>}; p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p>p:- div p+p {background-color:black;border:16px solid}; div p {<del>background-color:blue;</del><strong>color:yellow</strong>}; p {<del>background-color:pink; border:3px solid; </del>margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black; margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue; margin:5px; padding:5px;</del>}</p>
<p class="green">p class="green":- div p+p.green {background-color:green}; div p+p {<del>background-color:black;</del>border:16px solid}; div p {<del>background-color:blue;</del><strong>color:yellow</strong>}; p {<del>background-color:pink; border:3px solid; </del>margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black; margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue; margin:5px; padding:5px;</del>}</p>
<p>p:- div p+p {background-color:black;border:16px solid}; div p {<del>background-color:blue;</del><strong>color:yellow</strong>}; p {<del>background-color:pink; border:3px solid; </del>margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black; margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue; margin:5px; padding:5px;</del>}</p>
</div>
<p class="red level">p class="red level":- p.red.level {background-color:violet;<strong>color:yellow</strong>}; p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p class="red">p <del>class="red"</del>:- p {background-color:pink;border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; </del><strong>color:blue</strong>;<del>border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p id="hot1" class="red level">p id="hot1" class="red level":- #hot1 {background-color:orange}; p.red.level {<del>background-color:violet;</del><strong>color:yellow</strong>}; p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<div txt="org">div  txt="org":- p + *[txt=org] {background-color:green;color:orange}; * {<del>background-color:cyan;color:blue;</del>border:1px solid blue;margin:5px;padding:5px;}</div>
<q class="abc cba ab ba">q class="abc cba ab ba":- .abc {color:orange}; .ba {background-color:yellow}; .ab {<del>background-color:orange;color:green</del>}; .cba {<del>color:violet</del>}; q {<del>background-color:inherit;color:inherit;</del>border-width:0;margin:0;padding:0}; * {<del>background-color:cyan;color:blue;</del>border:1px solid blue;margin:5px;padding:5px;}</q>
<br />
<q class="abc cba ba ab">q class="abc cba ba ab":- .abc {color:orange}; .ba {background-color:yellow}; .ab {<del>background-color:orange;color:green</del>}; .cba {<del>color:violet</del>}; q {<del>background-color:inherit;color:inherit;</del>border-width:0;margin:0;padding:0}; * {<del>background-color:cyan;color:blue;</del>border:1px solid blue;margin:5px;padding:5px;}</q>

    </body>
</html>

HTML Web Page Embedded Output: