Contents
Once a user agent has parsed a document and constructed a document tree, it must assign, for every node in the tree, a value to every property that applies to the target media type.
The final value of a property is the result of a three-step calculation: the value is determined through specification (the "specified value"), then resolved into an absolute value if necessary (the "computed value"), and finally transformed according to the limitations of the local environment (the "actual value") if necessary.
User agents must first assign a specified value to a property based on the following mechanisms (in order of precedence):
Specified values may be "absolute" (e.g., the color value 'red' or the constant value 'hidden') or "relative" (e.g., the variable value 'auto', the font-related value 'em', pixel values, percentage values, etc.). Each value must be transformed into a computed value according to algorithms described in this specification.
When the root of the document tree has a property whose specified value is inherited and has relative units, the computed value is the percentage times the property's initial value.
For example, with an HTML document and the following style sheet:
HTML {font-size: 120%}
the computed value for 'font-size' will be 120% of the initial value of the 'font-size' property. The initial value of 'font-size' is defined to be 'medium', so the actual value is 20% larger than 'medium'. The actual value that this results in depends on the current environment.
A computed value has an absolute meaning but a user agent may not be able to respect this meaning in a given environment. For example, a user agent may not have a specified font size available, in which case the user agent must approximate the computed value. Computed values that are transformed to match the current environment are called actual values.
Only actual values are inherited.
Some actual values are inherited by the descendants of a node in the document tree. Each property definition specifies whether its value may be inherited.
Suppose there is an H1 element with an emphasized element inside:
<H1>The headline <EM>is</EM> important!</H1>
If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue.
The root of the document tree cannot inherit values.
To set a "default" style property for a document, authors may set the property on the root of the document tree. In HTML, for example, the HTML or BODY elements can serve this function. Note that this will work even if the author omits the BODY tag in the HTML source since the HTML parser will infer the missing tag.
For example, these rules cause the 'color' property on the BODY element to be inherited by all descendants of the BODY element:
BODY {
color: black;
background: url(texture.gif) white;
}
In this example, all descendants of the BODY element inherit the 'color' property.
Not all style properties are inherited. For example, the 'background' property is not inherited. (However, due to the initial value of 'transparent' on the 'background' property, the parent's background shines through.)
The following example illustrates that specified percentage values are not inherited; only actual values are inherited. Consider the style sheet:
BODY {font-size: 10pt}
H1 {font-size: 120%}
and the document fragment:
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
The computed value of the 'font-size' property for the H1 element is 12pt (120% times 10pt). If the user agent has the appropriate 12pt font available, 12pt will also be the property's actual value and the EM will inherit that value for the 'font-size' property. However, if the user agent does not have the 12pt font available, it may assign an actual value of, for example, 11pt to the 'font-size' property of the H1 element. In that case, the EM will inherit a value of 11pt for the same property.
Each property may also take the value 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent.
Style sheets may have three different origins: author, user, and user agent.
Note that default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agents' internal implementation, it may be impossible to change the values in the default style sheet.
Style sheets from these three origins will overlap in scope, and they interact according to the cascade.
The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
By default, rules in a user's personal style sheets have less weight than rules in the author's style sheets. Thus, if there are conflicts between the style sheets of an incoming document and the reader's personal sheets, the author's rules will be used. Both reader and author rules override the UA's default style sheet.
Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply.
To find the value for an element/property combination, user agents must apply the following algorithm:
The search for the property value must be terminated when any of the above steps yields a rule that has a higher weight than the other rules that apply to the same element/property combination.
This strategy gives author's style sheets considerably higher weight than those of the reader. It is therefore important that the User agent gives the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.
Style sheet designers can increase the weights of their declarations by declaring them 'important'.
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
In the example above, the first three declarations have increased weight, while the last declaration has normal weight.
A reader rule with an important declaration will override an author rule with a normal declaration. An author rule with an important declaration will override a reader rule with an important declaration.
Declaring a shorthand property (e.g., 'background') to be important is equivalent to declaring all of its sub-properties important.
In HTML, a selector's specificity is calculated as follows:
Concatenating the three numbers (in a number system with a large base) gives the specificity.
Some examples:
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
/H1 [REL=up]/ {} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
A declaration in the "style" attribute of an element has the same weight as a declaration with an "id"-based selector that is specified at the end of the style sheet:
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
In the above example, the color of the P element would be red. Although the specificity is the same for both declarations, the declaration in the "style" attribute will override the one in the STYLE element because of cascading rule number 5.
The UA may choose to honor presentational hints from other sources than style sheets, for example the FONT element or the "align" attribute in HTML. If so, the non-CSS presentational hints must be translated to the corresponding CSS rules with specificity equal to 1. The rules are assumed to be at the start of the author style sheet and may be overridden by subsequent style sheet rules.
Note. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.