[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

All topic groups:
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groups > Front page of CSS-guide > Guide pages > 5. What is the processing order of CSS > Cascading order (section 3/3)

Cascading order

Topics

Ordinary situations

Matching criterion are in principle simple. They include the cascading order. The browser might find definition, which have the same weight. Rules, which have the same weight last given remain in use.

In matching properties the main principle is that more specific override more common and last given all previous given rules. In this process it is also necessary to remember the usage of the import rule at-rule (@import), which I have already handled in the page How to put CSS into Web pages[S][Pw].

Cascading order is a part of the What is the processing order of CSS. In my mind it could be also written about cascading What is the processing order of CSS. Cascading order is connected to the pattern matching. The whole system can be simplified into tree main factors:

  • Inheritance (in CSS1 level only as automatic system + in CSS2 level also "forced inheritance")
  • All kinds of selectors with another selectors are matching patterns
  • Cascading order

Because these three factors are whole time in work, it is impossible to present a common model, which could describe, which definition is more specific than other. It is only possible to give some practical examples or general guidelines. The author must think in his mind, how browsers make their decisions in individual cases. He must know, what browsers can fulfil and what can't! Remember always also the document tree. Following order gives some general advice, when the effort is from general towards specific. The order might be in individual cases different.

  1. Bare universal selector
  2. BODY element without a class selector
  3. Class-specified universal selector
  4. Other Individual element type selector as BODY
  5. Other Individual element type selector as BODY with class selector
  6. Complex matching pattern, which have also class What are selectors, classes and id-attributes
  7. Id selector

Authors certainly want to create as manageable and powerful system as possible and where is minimum need of individual style definitions inside the document body. I give following recommendations:

  1. Single common BODY element definition with some common table declarations (I explain the latter in the page How to set CSS for table elements[S][Pw].
  2. Concerning document orientated definitions several rules to BODY element with different class and id specifiers
  3. Individual font styles have their own rules
  4. All other rules are made using matching patterns, which are counted from class specified BODY elements
  5. All kinds of specific document oriented definitions are used with care
[Top]

Important rule

The normal cascading order can override by using so-called !important rule like:

body { color: black !important; background: white !important;}

If the order doesn't meet any other important rules, any afterward given corresponding properties are not taken account. The rule concern primary the cascading order overriding the normal order. But the rule concerns not only the cascading order. Properties, which are given with the import rule override also class, id selector, matching patterns and style attributes to the same element.

The !important rule concerns however only certain element and properties, which are given to the element. If some child-element has its own declaration, it remains in use. The following tested examples explain this complex matter ([M][S][Pw]):

body {color: black !important;}
body.CssSite {color:blue;} /* the !important rule override this color-definition even if the BODY has as a specifier class CssSite */
p.new {color:blue;} /* the first definition is canceled, because to the BODY element given important rule doesn't override the property of the anew defined child-element (in this case it doesn't matter, if the child element have class specifier or not) but this rule is now in use; If the element P has not its own color-property, it inherit it from the BODY, which have the !important rule */
p {color:olive !important} /* all previous definitions are canceled concerning the element P; Now it is in use a new important rule, which concerns the element P */
p#id-p {color:blue;} /* the previous important rule override also this definition and following definition, which is in the document body inside an element P; Because it is stronger than id selector, it is also stronger than matching patterns */

...
<BODY> <P style ="color:purple;">You might believe, that the color of this paragraph would be purple, but it not true. The color is instead olive according to the important rule! Is this the result, what you really mean?
<P style ="color:purple !important;">If you want, that this definition could be in use, you must put the important rule to it!</p>

Because of the important rule overrides all other rules to an element, it is a certain kind of exception rule (the term is however quite problematic; read the Footnote 1). Authors might override with the important rule definitions, which they really don't want to override! Because the rule might cause much headaches to the authors and extra work to browsers, I recommend to use it extremely cautious.

Browser-specific notes:.

  1. Important rule doesn't work in Netscape 4.x series.

  2. With pseudo-elements :first-letter ja :first-line the important rule is related with only the element itself. If the element immediately starts with another element (for example >p>>cite>) different property values for child elements stay in Opera 7.x (for example cite {font-weight:normal} even if p:first-letter {font-weight:bold !important}). With other moder browser it is possible to override properties of the child-element with the !important rule. In my mind Opera 7.x works fully consitent.

  3. Redefining of the important rule doesn't always work.

After handling basics of CSS I handle next closer fonts and how to tailor web sites to different people and medias.

 
[Top]

Footnote 1. The problem is, that it is not a rule in that way as in most cases is called a rule (look at the page What are selectors, classes and id-attributes[S][Pw]). But it is neither a declaration-block (look at the definition of declaration-block from the page Definition methods[S][Pw]. Because it is inside a single declaration, it might be called as the important declaration. The another correct alternative is to call the important rule as important properties, because they are added to the normal property list among normal properties like in this declaration-block: {color:blue !important; background-color: green}. !important creates however exceptional declarations, which weight are related to normal rules. Selectors + important rules create together conditional sequences or statements, which we can call as rules.

[Top]

   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004
  ç¿»è¯‘：