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 is be found by way of inheritance or by looking at the property’s initial value.
The cascading and defaulting process takes a set of declarations as input, and outputs a specified value for each property on each element.
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. If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule.
For example, declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the @import. Similarly, style rules in a stylesheet imported into a scoped stylesheet are scoped in the same way.
Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid. The syntax of @import is:
@import [| ] ? ;
Where the
If a
@import "mystyle.css";
@import url("mystyle.css");
The import conditions allow the import to be media-dependent.
In the absence of any import conditions, the import is unconditional.
(Specifying all for the
The evaluation and full syntax of the expressions after the URL is defined by the Media Queries specification [MEDIAQ]. If the media query does not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in an @media block with the given media query. User agents may therefore avoid fetching a media-dependent import as long as the media query does not match.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
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 an independent style sheet.
Note: This does not place any requirements on resource fetching, only how the style sheet is reflected in the CSSOM and used in specs such as this one. Assuming appropriate caching, it is perfectly appropriate for a UA to fetch a style sheet only once, even though it’s linked or imported multiple times.
The origin of an imported style sheet is the same as the origin of the style sheet that imported it.
The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [CSS3SYN]
2.1. Content-Type of CSS Style Sheets
The processing of imported style sheets 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 style sheet,
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 style sheet.
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.
When values are omitted from a shorthand form, unless otherwise defined, each “missing” sub-property is assigned its initial value.
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 with background-image.
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 }
As more font sub-properties are introduced into CSS, the shorthand declaration resets those to their initial values as well.
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.)
In other cases, a property might be a reset-only sub-property of the shorthand: Like other sub-properties, it is reset to its initial value by the shorthand when unspecified, but the shorthand might not include syntax to set the sub-property to any of its other values. For example, the border shorthand resets border-image to its initial value of none, but has no syntax to set it to anything else. [CSS3BG]
If a shorthand is specified as one of the CSS-wide keywords [CSS3VAL], it sets all of its sub-properties to that keyword, including any that are reset-only sub-properties. (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
The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords.
Note: The excepted properties are actually markup-level features,
and should not be set in the author’s style sheet.
(They exist as CSS properties only to style document languages not supported by the UA.)
Authors should use the appropriate markup, such as HTML’s dir attribute, instead.
[CSS3-WRITING-MODES]
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.
Note, however, that any "default" style applied to that element
(such as, e.g. display: block from the UA style sheet on block elements such as Once a user agent has parsed a document and constructed a document tree,
it must assign,
to every element in the tree,
and correspondingly to every box in the formatting structure,
a value to every property that applies to the target media type. The final value of a CSS property for a given element or box
is the result of a multi-step calculation: Each property declaration applied to an element
contributes a declared value for that property
associated with the element.
See Filtering Declarations for details. These values are then processed by the cascade
to choose a single “winning value”. The cascaded value represents the result of the cascade:
it is the declared value that wins the cascade
(is sorted first in the output of the cascade).
If the output of the cascade is an empty list,
there is no cascaded value. The specified value the value of a given property that the style sheet authors intended for that element.
It is the result of putting the cascaded value through the defaulting processes,
guaranteeing that a specified value exists for every property on every element. In many cases, the specified value is the cascaded value.
However, if there is no cascaded value at all,
the specified value is defaulted.
The initial and inherit keywords
are handled specially when they are the cascaded value of a property, The computed value is the result of resolving the specified value
as defined in the “Computed Value” line of the property definition table,
generally absolutizing it in preparation for inheritance. Note: The computed value is the value that is transferred from parent to child during inheritance.
For historical reasons,
it is not necessarily the value returned by the See examples (f), (g) and (h) in the table below. Note: In general, the computed value resolves the specified value
as far as possible without laying out the document
or performing other expensive or hard-to-parallelize operations,
such as resolving network requests
or retrieving values other than from the element and its parent. The computed value exists even when the property does not apply
(as defined by the “Applies To” line).
However, some properties may change how they determine the computed value
based on whether the property applies to the element. The used value is the result of taking the computed value
and completing any remaining calculations to make it the absolute theoretical value
used in the layout of the document.
If the property does not apply to this element,
then the element has no used value for that property.
For example, a declaration of width: auto can’t be resolved into a length without knowing the layout of the element’s ancestors,
so the computed value is auto,
while the used value is an absolute length, such as 100px. [CSS21]
As another example, a
Lastly, if a property does not apply to an element,
it has no used value;
so, for example, the flex property has no used value
on elements that aren’t flex items.
A used value is in principle ready to be used,
but a user agent may not be able to make use of the value in a given environment.
For example, a user agent may only be able to render borders with integer pixel widths
and may therefore have to approximate the used width.
Also, the font size of an element may need adjustment based on the availability of fonts
or the value of the font-size-adjust property.
The actual value is the used value after any such adjustments have been made. Note: By probing the actual values of elements,
much can be learned about how the document is laid out.
However, not all information is recorded in the actual values.
For example, the actual value of the page-break-after property
does not reflect whether there is a page break or not after the element.
Similarly, the actual value of orphans
does not reflect how many orphan lines there is in a certain element.
See examples (j) and (k) in the table below. In order to find the declared values,
implementations must first identify all declarations that apply to each element.
A declaration applies to an element if: The values of the declarations that apply form,
for each property on each element,
a list of declared values.
The next section,
the cascade,
prioritizes these lists. The cascade
takes a unordered list of declared values
for a given property on a given element,
sorts them by their declaration’s precedence as determined below,
and outputs a single cascaded value. The cascade sorts declarations according to the following criteria,
in descending order of priority: Declarations from origins earlier in this list win over declarations from later origins.4.
Value Processing
4.1.
Declared Values
4.2.
Cascaded Values
4.3.
Specified Values
4.4.
Computed Values
getComputedStyle() function.
4.5.
Used Values
4.6.
Actual Values
4.7.
Examples
Property
Winning declaration
Cascaded value
Specified value
Computed value
Used value
Actual value
(a)
text-align
text-align: left
left
left
left
left
left
(b)
border-top-width, border-right-width, border-bottom-width, border-left-width
border-width: inherit
inherit
4.2px
4.2px
4.2px
4px
(c)
width
(none)
(none)
auto (initial value)
auto
120px
120px
(d)
list-style-position
list-style-position: inherit
inherit
inside
inside
inside
inside
(e)
list-style-position
list-style-position: initial
initial
outside (initial value)
outside
outside
outside
(f)
font-size
font-size: 1.2em
1.2em
1.2em
14.1px
14.1px
14px
(g)
width
width: 80%
80%
80%
80%
354.2px
354px
(h)
width
width: auto
auto
auto
auto
134px
134px
(i)
height
height: auto
auto
auto
auto
176px
176px
(j)
page-break-after
(none)
(none)
auto (initial value)
auto
auto
auto
(k)
orphans
orphans: 3
3
3
3
3
3
5.
Filtering
6.
Cascading