A single HTML or XHTML document can import and link to multiple external style sheets, contain one or more embedded style sheets, and make use of inline styles. In the process, it is quite possible that some rules will conflict with one another. CSS uses a mechanism called the cascade to resolve any such conflicts and arrive at a final set of styles to be applied to the document. Two key components of the cascade are specificity and inheritance.
Specificity values are cumulative; thus, a selector containing two
element identifiers and a class identifier (e.g.,
div.aside p) has a specificity of
0,0,1,2. Specificity values are
sorted in right-to-left precedence; thus, a selector containing 11
element identifiers (
0,0,0,11) has a
lower specificity than a selector containing just a single class
gives a declaration more weight than nonimportant
declarations. The declaration retains the specificity of its selectors
and is used only in comparison with other important declarations.
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
html element is at the
top of the tree, with the
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
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 not the same
as having zero specificity).
Note that some elements are not inherited. A property will always
define whether it is inherited. Some examples of noninherited properties
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:
Find all declarations that contain a selector that matches a given element.
Sort by explicit weight all declarations applying to the
element. Those rules marked
!important are given greater weight than
those that are not. Also, sort by origin all declarations 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 styles are stronger than any other styles, including
!important author styles. Both author and
reader styles override the user agent’s default styles.
Sort by specificity all declarations applying to a given element. Those elements with a higher specificity have more weight than those with lower specificity.
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.
Any presentational hints that come from non-CSS sources (e.g., the preference dialog within a browser) are given the same weight as the user agent’s default styles (see step 2 above).