CSS3 module: Cascading and inheritance

W3C Working Draft 15 December 2005

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 section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-cascade” in the subject, preferably like this: “[css3-cascade] …summary of comment…

This document was produced by the CSS Working Group (part of the Style Activity).

This document was produced under the 24 January 2002 CPP as amended by the W3C Patent Policy Transition Procedure. The Working Group maintains a public list of patent disclosures relevant to this document; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) with respect to this specification should disclose the information in accordance with section 6 of the W3C Patent Policy.

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 the relevant parts of CSS2 as a module for CSS3. With the exception of the 'initial' value and the optional title for '@import' and '@media', 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.

Table of contents

1. Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

It has non-normative (informative) references to the following other CSS3 modules:

2. Introduction

One of the fundamental design principles of CSS is to allow several style sheets, possibly from different sources, 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 specified value.

The specified 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 specified value.
  2. otherwise, if the value of the winning declaration is 'inherit', the inherited value (see below) becomes the specified value
  3. otherwise, if the value of the winning declaration is 'initial', the initial value (see below) becomes the specified value
  4. otherwise, if the property is inherited, the inherited value becomes the specified value
  5. otherwise, the initial value becomes the specified value

The specified value may need some computation before it can be used. For example, the specified 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 specified values are described in the Values and Units [CSS3VAL] module.

4. Style sheets including other style sheets: the @import rule

[When this section is rewritten to define user agent conformance more clearly, it should state that (1) the media list specified in an @import rule prevents the import from being processed if the medium doesn't match, but it doesn't "associate" the media with the style sheet so that it can't be imported some other way. (2) @import without a medium must ignore any medium specified for the same style sheet in a link from a document.]

The '@import' rule allows users to import style rules from other style sheets. Any '@import' rules must follow all '@charset' rules and precede all other at-rules and rule sets in a style sheet. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(…) around it.

The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with 'url()' and one with a bare string):

@import "mystyle.css";
@import url("mystyle.css");

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated “media queries” after the URI.

The following rules illustrate how '@import' rules can be made media-dependent:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

The full syntax of the expressions after the URL is defined by the Media Queries specification [MEDIAQ].

In the absence of any media queries, the import is unconditional. Specifying 'all' for the medium has the same effect.

At the end of the '@import' rule (after any media queries), there may be a string that assigns a name to the import.

@import url(layout1.css) screen "Plain style";
@import url(colors1.css) screen "Plain style";
@import url(style4.css) "Four-columns and dark";

Imports with different names (together with any named @media rules, see below) represent alternative style sheets. The UA should provide a way for the user to select an alternative by name.

The rules for which style sheet to import are as follows:

Style sheets are only imported if the media query on the '@import' (if any) matches the media for which the UA renders the document.

If an '@import' is skipped, then all '@import's inside the style sheet it points to are also skipped, no matter what their names.

HTML [HTML401] uses the term preferred style sheet for the named style sheets that the author marked as the default. In CSS, these are all style sheets whose name is the first name to occur on any '@import' or '@media'. Alternate style sheets are all other named style sheets. Finally, HTML calls style sheets without a name persistent style sheets, because they are imported together with the preferred ones as well as with any alternatives.

The UA should not only provide the user with a choice of alternative style sheets, but should also allow the user to turn all style sheets off. See [where?]

The list of alternative style sheets that the user can choose from consists of

I.e., the UA must not look for additional names by following links with a title attribute or named '@import' rules.

Are names matched case-sensitively or case-insensitively? Property names and font names are case-insensitive, so it is probably most consistent to treat style sheet names the same way.

Would it be easier to read if we precede the name with a keyword or some punctuation? E.g., '@import url(foo.css) as "Boxed"'.

5. Rules for specific media: the @media rule

An @media rule specifies the target media types (separated by commas) of a set of rules (delimited by curly braces). The '@media' construct allows style sheet rules for various media in the same style sheet:

@media print {
  body { font-size: 12pt; }
  h1 { font-size: 24pt; }
@media screen and (color) {
  body { font-size: medium; }
  h1 { font-size: 2em; }
@media screen, print {
  body { line-height: 1.2; }

The full syntax of the expressions after '@media' is defined by the Media Queries specification [MEDIAQ].

After the media queries, before the "{", there may be a string that assigns a name to the '@media' rule.

@media all "Ultra blue" {
  body { background: blue }
  h1 { color: cyan }
@media screen, print "Simple and light" {
  body { background: white; color: #333 }
  h2 { font-size: bigger }

All '@media' rules with a name, together with any '@import' rules with the same name, present alternative style sheets. The UA must read the rules inside some '@media' rules and skip others, as follows:

6. 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 [SELECT] describes how to compute the specificity. The declaration with the highest specificity wins.
  3. Order of appearance. The last declaration wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself. Rules in two imported style sheets are considered to be in the same order as the @import rules themselves.

The sorting process continues until one winning declaration is found.

7. Inheritance

Inheritance is a way of propagating property values from parent elements to their children. Inheritance means that the specified value of a given element/property combination is copied from the computed value of the parent element. The root element, which has no parent element, inherits the initial value of the property.

Some properties are said to be inherited. This means that, unless a value is specified for the element/property combination, the value will be determined by inheritance.

All properties accept the 'inherit' value which explicitly specifies that the value will be determined by inheritance. The 'inherit' value can be used to strengthen inherited values, and it can also be used on properties that are not normally inherited. If the 'inherit' value is set on the root element, the property is assigned its initial value.

8. Initial value

Each property has an initial value which becomes the specified 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.

9. 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 [CSS3SYN] 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.

10. Conformance





Normative references

L. David Baron. CSS3 module: Syntax. 13 August 2003. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2003/WD-css3-syntax-20030813
Håkon Wium Lie; Chris Lilley. CSS3 module: Values and Units. 13 July 2001. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2001/WD-css3-values-20010713
Håkon Wium Lie; Tantek Çelik; Daniel Glazman. Media Queries. 8 July 2002. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708
Daniel Glazman; et al. Selectors. 13 November 2001. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2001/CR-css3-selectors-20011113

Other references

Bert Bos; et al. Cascading Style Sheets, level 2 revision 1. 25 February 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-CSS21-20040225
David Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224