CSS3 module: Cascading and inheritance

W3C Working Draft 19 February 2002

This version:
Latest version:
Previous version:
Håkon Wium Lie, Opera Software, howcome@opera.com


This CSS3 module describes how values are assigned to properties. CSS allows several style sheets to influence the rendering of a document, and the process of combining these style sheets is called "cascading". If no value can be found through cascading, a value can be inherited from the parent element or the property's initial value is used.

Status of this document

This is a draft of a module of CSS level 3. It will probably be bundled with some other modules before it becomes a W3C Recommendation.

The main purpose of this module is to rewrite of the relevant parts of CSS2 as a module for CSS3. With the exception of the "initial" value, all features described in this module also exist in CSS2. Compared to CSS2, the cascading order has been changed in two cases as noted in the text.

This draft should not be cited except as "work in progress." It is a work item of the CSS working group and part of the Style activity. It may be modified or dropped altogether at any point in time. Implementations for the purpose of experimenting with the specification are welcomed, as long as they are clearly marked as experimental.

Feedback on this draft is invited. The preferred place for discussion is the (archived) public mailing list www-style@w3.org. W3C members can also send comments to the CSS WG mailing list.

A list of current W3C Recommendations and other technical documents including Working Drafts and Notes can be found at http://www.w3.org/TR.

Table of contents

1. Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

2. Introduction

One of the fundamental design principles of CSS is to allow both authors and uses to influence the rendering of a document. This CSS3 module describes how to select one among several conflicting declarations on a given element/property combination. The mechanism used in the selection process is called "cascading". When no declaration attempts to set the value of an element/property combination the value will either be inherited from the parent element, or set to the property's "initial value".

3. Input and output of this module

The input to the cascading and inheritance process is:

The output of the cascading and inheritance process is a single value, known as the "cascaded value".

The cascaded value is found by using the following pseudo-algorithm:

  1. If the cascading process (described below) yields a winning declaration and the value of the winning declaration is not "initial" or "inherit", the value of the winning declaration becomes the cascaded value.
  2. otherwise, if the value of the winning declaration is "inherit", the inherited value (see below) becomes the cascaded value
  3. otherwise, if the value of the winning declaration is "initial", the initial value (see below) becomes the cascaded value
  4. otherwise, if the property is inherited, the inherited value becomes the cascaded value
  5. otherwise, the initial value becomes the cascaded value

The cascaded value may need some computation before it can be used. For example, the cascaded value of the 'font-size' property for a given element may be '10em' which needs to be converted into device-specific units before being used to render a document. Computations on cascaded values are described in the Values and Units module.

4. Cascading

The purpose of cascading is to find one "winning declaration" among the set of declarations that apply for a given element/property combination.

User agents must sort declarations according to the following criteria, in order of importance:

  1. Weight. In CSS3, the weight of a declaration is based on the origin of the declaration and its marked level of importance. See a separate section below for how to compute the weight. The declaration with the highest weight wins.
  2. Specificity. The Selectors module describes how to compute the specificity. The declaration with the highest specificity wins.
  3. Order of appearance. The last declaration wins.

The sorting process continues until one winning declaration is found.

5. Inheritance

Inheritance is a way of propagating property values from parent elements to their children. Many properties are inherited, which means that the parent's element will automatically be used unless otherwise specified. All properties accept the "inherit" keyword which explicitly specifies that the value should be fetched from the parent. The root element [add ref], which has no parent, uses the initial value instead as the inherited value.

As a general rule, it is the computed value of a property which is inherited. Properties may, however, specify that other sorts of values should be inherited instead. For an example, see the 'line-height' property. For more information about specified, computed and actual values, see the CSS3 module on Values and Units.

6. Initial value

Each property has an initial value which becomes the cascaded value when cascading and inheritance does not yield a value. Also, the initial value can be explicitly specified with the "initial" keyword which all properties accept.

7. Computing weight

In order to sort declarations in the cascading process, the weight of a declaration must be known. In CSS3, the weight of a declaration is based on the origin of the declaration and its marked level of importance.

CSS style sheets may have three different origins: author, user, and user agent (UA).

Each CSS declaration can have two levels of importance: normal (which is default) and important (which must be marked). The CSS3 syntax module [add ref] describes how declarations are marked as important.

The weight of style sheets from the various origins, in ascending order, is:

  1. User agent style sheets
  2. User normal style sheets
  3. Author normal style sheets
  4. Author important style sheets
  5. User important style sheets

By default, this strategy gives author declarations more weight than those of the user. It is therefore important that the UA give the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.

Declarations in imported style sheets have lower weight than declarations in the style sheet from where they are imported. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence declarations apply.

If the user agent chooses to honor presentational hints from other sources than style sheets, these hints must be given the same weight as the user agent's default style sheet. This rule is intended for presentational hints in HTML.

Note that non-CSS presentational hints had a higher weight in CSS2.