Basic Concepts - CSS Reference - page 8

Inheritance
The elements in a document form a treelike hierarchy with the root element at the top and the
rest of the document structure spreading out below it (which makes it look more like a tree
root system, really). In an HTML document, the html element is at the top of the tree, with
the head and body elements descending from it. The rest of the document structure descends
from those elements. In such a structure, elements lower down in the tree are descendants of
the ancestors, which are higher in the tree.
CSS uses the document tree for the mechanism of inheritance, in which a style applied to an
element is inherited by its descendants. For example, if the body element is set to have a col-
or of red , that value propagates down the document tree to the elements that descend from the
body element. Inheritance is interrupted only by a style rule that applies directly to an element.
Inherited values have no specificity at all (which is notthe same as having zero specificity).
Note that some elements are not inherited. A property will always define whether it is in-
herited. Some examples of noninherited properties are padding , border , margin , and back-
ground .
The Cascade
The cascade is how CSS resolves conflicts between styles; in other words, it is the mechanism
by which a user agent decides, for example, what color to make an element when two different
rules apply to it and each one tries to set a different color. The following steps constitute the
cascade:
1. Find all declarations that contain a selector that matches a given element.
2. Sort by explicit weight all declarations applying to the element. Those rules marked !im-
portant are given greater weight than those that are not. Also, sort by origin all declara-
tions applying to a given element. There are three origins: author, reader, and user agent.
Under normal circumstances, the author's styles win out over the reader's styles. !im-
portant reader styles are stronger than any other styles, including !important author
styles. Both author and reader styles override the user agent's default styles.
3. Sort by specificity all declarations applying to a given element. Those elements with a
higher specificity have more weight than those with lower specificity.
4. Sort by order all declarations applying to a given element. The later a declaration appears
in a style sheet or a document, the more weight it is given. Declarations that appear in an
imported style sheet are considered to come before all declarations within the style sheet
that imports them, and have a lower weight than those in the importing style sheet.