css tutorial

Cascading order is a sorting system consisting of rules by which declarations are sorted out so that there are not conflicts as to which declaration is to influence the presentation. The sorting begins with rule no 1. If a match is found the search is over. If there is no match under rule no 1 the search continues under rule no 2 and so on.

1. Find all declarations that apply to a specific selector/property
   and
   Declare the specified style if the selector matches the element
   if there isn’t any
   Let the element inherit its parent property
   if there isn’t any
   Use initial value
2. Sort by weight (! important)
   Increased weight take precedence over normal weight
3. Sort by origin
   Rules with normal weight declared in author’s style sheet will override rules with normal weight declared in user’s personal style sheets
   Rules with increased weight declared in user’s personal style sheet will override rules with normal weight declared in author’s style sheet
   Rules with increased weight declared in author’s style sheet will override rules with increased weight declared in user’s personal style sheets
   Author’s and user’s rules will override UA’s default style sheet.
4. Sort by selector’s specificity
   More specific selector will override less specific one:

   ID-selector (most specific), followed by
   Classified contextual selectors (TABLE P EM.fot)
   Class selectors (EM.fot)
   Contextual selectors – the “lower down” the more weight, (TABLE P EM), (TABLE P EM STRONG) – STRONG has more weight than EM.

5. Sort by order specified
   If two rules have the same weight, the latter specified overrides ones specified earlier. Style sheets are sorted out as follows:

   The STYLE attribute (inline style) overrides all other styles
   The Style element (embedded style) overrides linked and imported sheets
   The LINK element (external style) overrides imported style
   The @import statement – imported style sheets also cascade with each other in the same order as they are imported