W3C

CSS3 module: Cascading and inheritance

Editor's Draft 19 January 2009

This version:
http://www.w3.org/TR/2009/ED-css3-cascade-20090119
Latest version:
http://www.w3.org/TR/css3-cascade
Previous version:
http://www.w3.org/TR/2005/WD-css3-cascade-20051215
Editor:
Håkon Wium Lie, Opera Software, howcome@opera.com

Abstract

This CSS3 module describes how to find the specified value for all properties on all elements. Values either come from style sheets or the property's initial value. By way of cascading and inheritance, values are propagated to all properties on all elements.

This module interfaces with several other modules. It relies on [CSS3SYN] to parse the style sheets, on [SELECT] to calculate specificity, and on [MEDIAQ] to determine if a declaration applies to the media. The output from this module is a specified value for all element/property combinations. The processing of specified values is described in [CSS3VAL].

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

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 Introduction

One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved.

The opposite problem arises when no declarations try to set a the value for an element/property combination. In this case, a value must be found by way of inheritance or by looking at the property's initial value.

The rules for finding a the specified value for all properties on all elements is described in this specification. The rules for finding the specified values in the page context and the margin boxes are described in [CSS3PAGE].

2 Input to and output from this module

The input to the computations described in this module is:

The output of the computations described in this module is a specified value for all properties on all elements.

In order to find the specified values, implementations must first identify which statements that apply to the document. This is done by:

  1. Starting out with all author style sheets specified in the document, as well all user and UA style sheets.
  2. Removing statements that have associated Media Queries [MEDIAQ] that are false in the given context.
  3. Removing @import statements that do not match the title of the preferred style sheet, if any. This is described in Importing style sheets below.
  4. Removing @media statements that do not match the title of the preferred style sheet, if any. This is described in Named @media rules below.
  5. Expanding all remaining @import rules.

Then, for every element, the value for each property can be found by following this pseudo-algorithm:

  1. Identify all declarations that apply to the element (as described in [SELECT])
  2. 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.
  3. Otherwise, if the value of the winning declaration is ‘inherit’, the inherited value (see below) becomes the specified value.
  4. Otherwise, if the value of the winning declaration is ‘initial’, the initial value (see below) becomes the specified value.
  5. Otherwise, if the property is inherited, the inherited value becomes the specified value.
  6. Otherwise, the initial value becomes the specified value.

The specified value may need some computation before it can be used. This is described in the Values and Units [CSS3VAL] module.

3 Importing style sheets

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:

If the UA is using the default style, only “Yellow Fish” and the nameless ‘@import’s (shown in bold) are used, the others are skipped:

@import "common1.css";
@import "yellowfish.css" "Yellow Fish";
@import "simple.css"     "Simple";
@import "extra.css"      "Yellow Fish";
@import "deco-a.css"     "Budapest";
@import "deco-b.css"     "Budapest";
@import "common2.css";

If the user has chosen the “Simple” style, only “Simple” and the nameless ‘@import’s (all shown in bold) are used, the others are skipped:

@import "common1.css";
@import "yellowfish.css" "Yellow Fish";
@import "simple.css"     "Simple";
@import "extra.css"      "Yellow Fish";
@import "deco-a.css"     "Budapest";
@import "deco-b.css"     "Budapest";
@import "common2.css";

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.

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.

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.

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"’.

[Should the spec 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?]

4 Named @media rules

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:

If the user wants the UA to use the default style, the following example results in the UA reading the “Reverse video” style, the unnamed ‘@media’ rule and all rules that are not in any ‘@media’ (all shown in bold). We assume the UA uses the ‘screen’ media.

body { background: white }
p { text-indent: 2em }

@media screen {
  h1 { font-size: xx-large }
}
@media screen "Reverse video" {
  body { background: black; color: white }
}
@media screen, print "Rainbow style" {
  p { color: #E0D }
}

If the user wants the UA to use the “Rainbow style” style, the following example results in the UA reading the “Rainbow style” ‘@media’ rule, the unnamed ‘@media’ rule and all rules that are not in any ‘@media’ (all shown in bold). We assume the UA uses the ‘screen’ media.

@import url(base.css);
@import url(altbase.css) "Reverse video";

body { background: white }

@media screen {
  h1 { font-size: xx-large }
}
@media screen "Reverse video" {
  body { background: black; color: white }
}
@media screen, print "Rainbow style" {
  p { color: #E0D }
}

5 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 Computing Weight 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.

6 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 is copied from the parent element's computed value for the same property.

The root element, which has no parent element, inherits the initial value of the property.

Pseudo-elements inherit according to a fictional tag sequence described for each pseudo-element [SELECT].

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 in the cascade, 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.

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

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

9 Conformance

[TBD]

Acknowledgments

David Baron contributed to thie specification.

References

Normative references

[CSS3SYN]
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
[CSS3VAL]
Håkon Wium Lie; Chris Lilley. CSS3 Values and Units. 19 September 2006. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2006/WD-css3-values-20060919
[MEDIAQ]
Håkon Wium Lie; Tantek Çelik; Daniel Glazman. Media Queries. 6 June 2007. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606
[SELECT]
Daniel Glazman; Tantek Çelik; Ian Hickson. Selectors. 15 December 2005. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2005/WD-css3-selectors-20051215

Other references

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 19 July 2007. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2007/CR-CSS21-20070719
[CSS3PAGE]
Håkon Wium Lie; Melinda Grant. CSS3 Module: Paged Media. 10 October 2006. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2006/WD-css3-page-20061010
[HTML401]
Dave 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

Index

Property index

Property Values Initial Applies to Inh. Percentages Media