Abstract
This CSS module describes how to collate style rules and assign values
to all properties on all elements. By way of cascading and inheritance,
values are propagated for all properties on all elements. CSS is a language for describing the
rendering of structured documents (such as HTML and XML) on screen, on
paper, in speech, etc.
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 [email protected] (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 by a group operating under the 5 February
2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in
connection with the deliverables of the group; 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) must disclose the information in accordance with section
6 of the W3C Patent Policy.
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 the specified value for all properties on all
elements in the document are described in this specification. The rules
for finding the specified values in the page context and its margin boxes
are described in [CSS3PAGE].
2. Importing style sheets: the
‘@import’ rule
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. Such
media-dependent imports include a comma-separated list of “media
queries” after the URI. In the absence of any media query, the import is
unconditional. (Specifying ‘all’ for the medium has the same effect.) The UA
must import the style sheet if (and only if) the media condition evaluates
to true.
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 evaluation and full syntax of the expressions after the URL is
defined by the Media Queries specification [MEDIAQ].
When the same style sheet is imported or linked to a document in
multiple places, user agents must process (or act as though they do) each
link as though the link were to a separate style sheet.
2.1. Content-Type of
imported stylesheets
The processing of imported stylesheets depends on the actual type of
the linked resource. If the resource does not have Content-Type
metadata, or the host document is in quirks
mode and has the same
origin as the imported stylesheet, the type of the linked resource is
text/css. Otherwise, the type is determined from its Content-Type
metadata.
If the linked resource's type is text/css, it must be
interpreted as a CSS stylesheet. Otherwise, it must be interpreted as a
network error.
3. Shorthand Properties
Some properties are shorthand
properties, meaning that they allow authors to specify the values of
several properties with a single property. A shorthand property sets all
of its longhand sub-properties, exactly as if expanded in place.
For example, the CSS 2.1 ‘font’
property is a shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’, and ‘font-family’ all at once. The multiple
declarations of this example:
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
can therefore be rewritten as
h1 { font: bold 12pt/14pt Helvetica }
When values are omitted from a shorthand form, unless otherwise
defined, each "missing" sub-property is assigned its initial value.
This means that a shorthand property declaration always sets
all of its subproperties, even those that are not
explicitly set. Carelessly used, this might result in inadvertently
resetting some sub-properties. Carefully used, a shorthand can guarantee a
"blank slate" by resetting sub-properties inadvertently cascaded from
other sources. For example, writing ‘background:
green’ rather than ‘background-color:
green’ ensures that the background color overrides any earlier
declarations that might have set the background to an image.
In some cases, a shorthand might have different syntax or special
keywords that don't directly correspond to values of its sub-properties.
(In such cases, the shorthand will explicitly define the expansion of its
values.)
If a shorthand is specified as one of the CSS-wide
keywords, it sets all of its sub-properties to that keyword. (Note
that these keywords cannot be combined with other values in a single
declaration, not even in a shorthand.)
Declaring a shorthand property to be ‘!important’ is equivalent to declaring all of its
sub-properties to be "!important".
3.1. Resetting All
Properties: the ‘all’
property
| Name:
| all
|
| Value:
| initial | inherit | default
|
| Initial:
| See individual properties
|
| Applies to:
| See individual properties
|
| Inherited:
| See individual properties
|
| Percentages:
| See individual properties
|
| Media:
| See individual properties
|
| Computed value:
| See individual properties
|
| Animatable:
| See individual properties
|
The ‘all’ property is a
shorthand that resets all CSS properties. It only
accepts the CSS-wide
keywords.
For example, if an author specifies ‘all:
default’ on an element it will block all inheritance and reset
all properties, as if no rules appeared in the author level of the
cascade.
This can be useful for the root element of a "widget" included in a
page, which does not wish to inherit the styles of the outer page.
4. Cascading and
Inheritance
The cascading and inheritance process takes a set of declarations as
input, and outputs a specified value for each property on each element.
4.1. Filtering
Declarations
In order to find the specified values, implementations must first
identify all declarations that apply to each element. A declaration
applies to an element if:
- It belongs to a stylesheet that currently applies to this document.
- It is not qualified by a conditional rule [CSS3-CONDITIONAL] with a
false condition.
- It belongs to a ruleset whose selector matches the element. [SELECT] (Taking scoping into account,
if necessary.)
The declarations that apply form, for each property on each element, a
list of potential values. The next section, the cascade, prioritizes these
lists.
4.2. Cascading Declarations
The cascade algorithm takes an unordered list of declarations for a
given property on an element and sorts it by precedence as determined
below.
User agents must sort declarations according to the following criteria,
in descending order of priority:
- Origin
- The origin of a declaration is based on where it comes from and
whether or not it is declared ‘
!important’
(see below). The precedence of the various origins is, in descending
order:
- Transition declarations [CSS3-TRANSITIONS]
- Important user agent declarations
- Important user declarations
- Important override declarations [DOM-LEVEL-2-STYLE]
- Important author declarations
- Animation declarations [CSS3-ANIMATIONS]
- Normal override declarations [DOM-LEVEL-2-STYLE]
- Normal author declarations
- Normal user declarations
- Normal user agent declarations
Declarations from origins earlier in this list win over declarations
from later origins.
- Scope
- A declaration can be scoped to a subtree of the
document so that it only affects its scoping
element and that element's descendants. For example, [HTML5] defines scoped