6 Assigning property values, Cascading, and Inheritance


  1. Specified, computed, and absolute values
    1. Specified values
    2. Computed values
    3. Actual values
  2. Inheritance
    1. The inherit value
  3. The cascade
    1. Cascading order
    2. 'Important' rules
    3. Cascading order in HTML
    4. Precedence of non-CSS presentational hints

6.1 Specified, computed, and absolute values

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.

6.1.1 Specified values

User agents must first assign a specified value to a property based on the following mechanisms (in order of precedence):

  1. If the cascade results in a value, use it.
  2. Otherwise, if the value is inherited, use it.
  3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

6.1.2 Computed values

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.

6.1.3 Actual values

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.

6.2 Inheritance

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:

<H1>A <EM>large</EM> heading</H1>

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.

6.2.1 The inherit value

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.

6.3 The cascade

Style sheets may have three different origins: author, user, and user agent.

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.

6.3.1 Cascading order

To find the value for an element/property combination, user agents must apply the following algorithm:

  1. Find all declarations that apply to the element/property in question. Declarations apply if the associated selector matches the element in question. If no declarations apply, terminate the algorithm.
  2. Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations. See the section on 'important' rules for more information.
  3. Sort by origin: the author's style sheets override the user's style sheets which override the default style sheet. An imported style sheet has the same origin as the style sheet from which it is imported.
  4. Sort by specificity of selector: more specific selectors will override more general ones. The definition and calculation of specificity is object-language dependent. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
  5. Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

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.

6.3.2 'Important' rules

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.

6.3.3 Cascading order in HTML

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:

<STYLE type="text/css">
  #x97z { color: blue }
<P ID=x97z style="color: red">

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.

6.3.4 Precedence of non-CSS presentational hints

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.