CSS3 module: Cascading and inheritance

W3C Working Draft, 13 July 2001

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.

All the properties and features described here that also exist in CSS level 2 are intended to be backwards compatible. (There are no new features in this version of the draft; its purpose is to rewrite the relevant part of CSS level 2 as a module for CSS3.)

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". Often, however, no declaration will attempt to set the value of an element/property combination and the value will have to come from the parent element through "inheritance", or from 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 "resulting value". The resulting value may need some computation before it can be used. For example, the resulting 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 resulting values are described in the Values and Units module.

4. Cascading

To find the value for an 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.
  2. Specificity. The selector module describes how to compute the specificity.
  3. Order of appearance.

The sorting process continues until there is one "winning declaration" ahead of the other declarations.

5. Inheritance

To find the "resulting value", the following pseudo-algorithm must be used:

  1. If the value of the winning declaration is different from "inherit", it becomes the resulting value.
  2. Otherwise, if the property is inherited or if the value resulting from cascading is "inherit", the inherited value becomes the resulting value.
  3. Otherwise use the property's initial value becomes the resulting value. The initial value of each property is indicated in the property's definition.

Since it has no parent, the root of the document tree [add ref] cannot use values from the parent element; in this case, the initial value becomes the resulting value.

6. 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).

By default, author declarations have more weight than user declarations. Precedence is reversed, however, for declarations that are marked as "important". The CSS3 syntax module describes how declarations are marked as important. Both user and author declarations have more weight than UA declarations.

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.