Common

In order to construct CSS-files it is necessary to understand, in which order browsers should read CSS-properties.

This relationship describes a simple document tree:

Most of the rules are named using the family metaphor. It is also remarkable that rules handle element levels, nested elements and bilateral relationships of individual elements in the document tree (this model works partially also with attribute selectors, but as I have told, attribute selectors don't work today in official browsers). I handle also in this connection the :first-child pseudo-class selector, because it is a part of whole system. It can be understand only in connection to other relationships. I try to explain everything as grass-root level as I can! Parts of the metaphor are:

Inheritance

In family children inherit their parents and descendant got his inheritance from his ancestor. It is essential to understand inheriting rules and the mechanism, which is called inheritance. Inheritance means the automatic mechanism, how properties are applied into elements. The principle concerns nested elements, which are parts of the document tree.

The inheritance of properties, which are give to the BODY-element works fine with certain block elements and their necessary child-elements. Automatic inherited properties are primary most font and text types.

Elements, which effect to the text, like H1-H6, B and I retain in variable level their characteristic features. H1-H6 keeps their relative sizes compared to the basic text, but most text style definitions are inherited from the element BODY. Some text elements retain their features even if CSS to BODY has defined. The reason why some font-related properties are not inherited to all possible elements is the fact that some elements have been predefined in the default settings of the browsers. The quantity of predefined elements is browser-dependent. Because of this reason some browsers need more CSS than some other browsers. In some browsers inheritance doesn't work correctly, but I handle some difficulties later.

All properties like background properties are not inherited from parent to child (in the appendix of CSS2 specifications is a table, which tells, which properties are inherited and which not). Children are in that means independent, that they can get own definitions.

Contextual selectors or matching patterns base primary on the bilateral relationships of elements and the relationships are described with the family metaphor. On the background of this method is also the document tree. But otherwise than in the automatic inheritance, pattern matching works like key and keyhole principle. According to the name they take account the context. Certain style is applied only to elements, which are in the right place or they have certain parent element.

In fact a simple universal or element type selector is a matching pattern. In order to separate simple selectors from complex selectors, I mean as matching patterns those kinds of rules, which have at least two conditions. An example of a very simple matching pattern ():

table p {color:green;} /* the latter condition is called as descendant selector; in these kinds of patterns, it is remarkable, that the left round bracket ({) must be in the same row as the pattern, because I have found that patterns don't work if it is another row */

According to this rule, all paragraphs, which are inside tables and then are descendants of the element TABLE, got the property color:green (paragraphs are inside the start-tag and end-tag of the element TD).

I use often these kinds of matching patterns, when I define list-images to unordered lists (UL). If you use grouping, you can create with same declaration exact properties to several level of lists. Below is an example of this kind of solution ( - there is also models of the next examples):

ul li, ul li li li { /* in this example I have is defined first and third level lists and they get green list-images (I explain in other connection allowed properties for lists) */
list-style-type: disc;
list-style-image: url(pallo-vihrea.gif); /* vihrea = green */
list-style-position: inside;
margin-left: -10px; }

ul li li { /* according to this rule, second level lists got red list-image; if this list-marker is not defined, it gets the value from previous rule set and it would get green images! */
list-style-type: disc;
list-style-image: url(pallo-punainen.gif); /* punainen = red */
list-style-position: inside;
margin-left: -10px;}

It is also remarkable to remember that the length of the pattern is not the only meaningful factor. When I designed the list test, which I have mentioned, I made an error. I had not found all mutual relationships of different rules. I try to sketch them to you by this example:

li ol+ul {list-style-type: disc; /* according this rule the list-image should be red; It tested it with a preview-version of Netscape 6.x */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

ul li {list-style-type: disc; /* the previous rule don't remain in use, because the shorter pattern UL LI cancels it and redefine list-elements; It just continues at the point, where the latter definitions ends! */
list-style-image: url(./Css/Kuvat/pallo.gif);
list-style-position: outside;}

li ol+ul li {list-style-type: disc; /* in order to get the second rule in use, it must continue with an additional element LI - now Netscape shows the desired image! */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}



The most exact matching pattern could be created by combining element and attribute What are selectors, classes and id-attributes.

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.
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

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.

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.

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