CSS3 module: Cascading and inheritance

Abstract

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 https://www.w3.org/TR.

Table of contents

• 1. Dependencies on other modules
• 2. Introduction
• 3. Input and output of this module
• 4. Cascading
• 5. Inheritance
• 6. Initial value
• 7. Computing weight
• Acknowledgments

1. Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

• Selectors, which describes specificity
• Syntax, which describes how to parse CSS style sheets into declarations
• Values and Units, which describes the computation from specified through computed to actual values

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 set of declarations that apply to the element/property combination in question. It is assumed that declarations that do not apply (e.g. due to the media type, or user selection of style sheets) is not included in the set.
• The inherited value of the property.
• The initial value of the property.

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

• Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
• User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did).
• User agent: Conforming user agents [add ref] must apply a "default style sheet" (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" [add ref] for a recommended default style sheet for HTML 4.0 documents.

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.

Acknowledgments

[acknowledgments]