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.

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 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. Computing weight
• Acknowledgments

1. Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

• the Selectors module, which describes specificity
• the Syntax module, which describes how to parse CSS style sheets into declarations
• the Values and Units module, which describes the computation from specified through computed to actual values
• [in which module are presentational attributes described?]

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 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) is not included in the set.
• The inherited value of the property. If the property has a concept of specified, computed and actual values, the computed value is normally the one which is inherited. See the module on Values and Units for more information.
• The initial value of the property.

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

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

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.

Acknowledgments

[acknowledgments]