A document's style sheets may be assigned in three different ways.

The most common way is a style sheet defined by the developer or the author who specifies the styles internally within a HTML document, or by linking the document to an external source.

Another way is a style sheet or sheets that might be modified or attached by the user of the document. That may be done by user provided interface that generates user defined style sheet or individual style.

The third way is a style sheet or sheets generated by a user agent (browser) that applies a default style sheet which, for instance, makes all em and i tags wrapped text appearing as italic, etc...

These three situations may and often will overlap in scope. Their interaction is defined by the CSS cascade; in other words when more then one style rule applies to the same element, the one with the greater weight takes precedence.

Cascade order

The following list explains the cascading order:

  1. All declarations applying to an element or a property for the defined media type are found first. If the associated selector matches the element in question and the current medium matches media list, this declaration will be applied.
  2. Rules will be sorted according to importance (normal or important (see below)) and origin (author, user or user agent) in this ascending order:
    1. user agent declarations;
    2. user normal declarations;
    3. author normal declarations;
    4. author important declarations;
    5. user important declarations.
  3. Those rules with the same importance will be sorted by the origin of specificity of selector (see below) in the way that more specific selectors will override the more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
  4. The last is the sorting of rules by the order specified in sense that if two declarations have the same weight, origin and specificity, the latter specified wins. The declarations in imported style sheets are to be before those in the style sheet itself.   

!important rules

The style sheets defined by the author are higher weight of those defines by the user. To override this cascade rule, a properties value may be set as !important. Such a declaration will ensure that the user styles take precedence over those linked by the author.

Selector's specificity

The specificity of a selector depends on the form of the selector and it is represented by the system with a, b, c, d letters where each letter represents one specific level, with the letter on the left having a precedence to the one on its right.

The following list explains how to calculate a selector's specificity:

  • a => count "1" if the declaration comes from a style attribute of the element rather then a rule (a = 1);
  • b => count the number of the id attributes in the selector (b = +1);
  • c => count the number of the other attributes and pseudo-classes in the selector (c = +1);
  • d => count the number of element names and pseudo-elements in the selector (d = +1 ).

Some examples of the specificity:

Declaration Specificity
* {}  a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0
i {}
  a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1
li:first-line {}  a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2
ul li {}  a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2
ul ol+li {}  a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3
h1 + *[rel=up]{}  a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1
ul ol li.red {}  a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3
li.red.level {}  a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1
#x34y {}  a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0
style=""  a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0

 

 

 

 

 

 

 

Example

Example of CSS inherited values:

 

›› go to examples ››