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 [css-page-3].
1.1. Module Interactions
This section is normative.
This module replaces and extends the rules for assigning property values, cascading, and inheritance defined in [CSS2] chapter 6.
Other CSS modules may expand the definitions of some of the syntax and features defined here.
For example, the Media Queries Level 4 specification,
when combined with this module, expands the definition of
the
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, with two exceptions:
-
If a feature (such as the @namespace rule) explicitly defines that it only applies to a particular stylesheet, and not any imported ones, then it doesn’t apply to the imported stylesheet.
-
If a feature relies on the relative ordering of two or more constructs in a stylesheet (such as the requirement that @namespace rules must not have any other rules other than @import preceding it), it only applies between constructs in the same stylesheet.
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.
Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset), or else the @import rule is invalid. The syntax of @import is:
@import [| ] ? ;
Where the
If a
@import "mystyle.css" ; @import url ( "mystyle.css" );
2.1. Conditional @import Rules
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
@import url ( "fineprint.css" ) print; @import url ( "bluish.css" ) projection, tv; @import url ( "narrow.css" ) handheld and( max-width:400 px );
User agents may therefore avoid fetching a media-dependent import as long as the media query does not match.
The evaluation and full syntax of the import conditions is defined by the Media Queries specification [MEDIAQ].
2.2. Processing Stylesheet Imports
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 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. [css-syntax-3]
2.3. 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 : 12 pt ; line-height : 14 pt ; font-family : Helvetica; font-variant : normal; font-style : normal; }
can therefore be rewritten as
h1{ font : bold12 pt /14 pt 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. [css-backgrounds-3]
If a shorthand is specified as one of the CSS-wide keywords [css-values-3], 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
Name: | all |
---|---|
Value: | initial | inherit | unset |
Initial: | see individual properties |
Applies to: | see individual properties |
Inherited: | see individual properties |
Percentages: | see individual properties |
Computed value: | see individual properties |
Animation type: | see individual properties |
Canonical order: | per grammar |
The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords. It does not reset custom properties [css-variables-1].
Note: The excepted CSS properties direction and unicode-bidi 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. [css-writing-modes-3]
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 is 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 CSS-wide keywords are handled specially
when they are the cascaded value of a property,
setting the specified value as required by that keyword,
see § 7.3 Explicit Defaulting. 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.
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 formatting of the document. 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. [CSS2] As another example, a If a property does not apply to this element or box type— For example, the flex property has no used value on elements that aren’t flex items. Note: A property defined to apply to “all elements”
applies to all elements and display types,
but not necessarily to all pseudo-element types,
since pseudo-elements often have their own specific rendering models
or other restrictions.
The ::before and ::after pseudo-elements, however,
are defined to generate boxes almost exactly like normal elements
and are therefore defined accept all properties that apply to “all elements”.
See [CSS-PSEUDO-4] for more information about pseudo-elements. 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 an 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. The output of the cascade is a (potentially empty) sorted list of declared values for each property on each element. Each style rule has a cascade origin,
which determines where it enters the cascade.
CSS defines three core origins: Extensions to CSS define the following additional origins: CSS attempts to create a balance of power between author and user style sheets.
By default, rules in an author’s style sheet override those in a user’s style sheet,
which override those in the user-agent’s default style sheet.
To balance this, a declaration can be marked important,
which increases its weight in the cascade and inverts the order of precedence. A declaration is important if it has a !important annotation
as defined by [css-syntax-3],
i.e. if the last two (non-whitespace, non-comment) tokens
in its value are the delimiter token ! followed by the identifier token important.
All other declarations are normal (non-important). An important declaration takes precedence over a normal declaration.
Author and user style sheets may contain important declarations,
with user-origin important declarations
overriding author-origin important declarations.
This CSS feature improves accessibility of documents
by giving users with special requirements
(large fonts, color combinations, etc.)
control over presentation. Important declarations from all origins take precedence over animations.
This allows authors to override animated values in important cases.
(Animated values normally override all other rules.) [css-animations-1] User-agent style sheets may also contain important declarations.
These override all author and user declarations. The UA may choose to honor presentational hints in a source document’s markup,
for example the Note: Presentational hints entering the cascade as UA-origin rules
can be overridden by author-origin or user-origin styles.
Presentational hints entering the cascade as rules
can be overridden by styles,
but not by non-important user-origin styles.
Host languages should choose the appropriate origin for presentational hints
with these considerations in mind. When the cascade does not result in a value,
the specified value must be found some other way. Inherited properties draw their defaults from their parent element through inheritance;
all other properties take their initial value.
Authors can explicitly request inheritance or initialization
via the inherit and initial keywords. Each property has an initial value,
defined in the property’s definition table.
If the property is not an inherited property,
and the cascade does not result in a value,
then the specified value of the property is its initial value. Inheritance propagates property values from parent elements to their children.
The inherited value of a property on an element
is the computed value of the property on the element’s parent element.
For the root element,
which has no parent element,
the inherited value is the initial value of the property. Pseudo-elements inherit according to the fictional tag sequence
described for each pseudo-element. [SELECT] Some properties are inherited properties,
as defined in their property definition table.
This means that,
unless the cascade results in a value,
the value will be determined by inheritance. A property can also be explicitly inherited. See the inherit keyword. Note: Inheritance follows the document tree and is not intercepted by anonymous boxes,
or otherwise affected by manipulations of the box tree. Several CSS-wide property values are defined below;
declaring a property to have these values explicitly specifies a particular defaulting behavior.
As specified in CSS Values and Units Level 3 [css-values-3],
all CSS properties can accept these values. If the cascaded value of a property is the initial keyword,
the property’s specified value is its initial value. If the cascaded value of a property is the inherit keyword,
the property’s specified and computed values are the inherited value. If the cascaded value of a property is the unset keyword,
then if it is an inherited property, this is treated as inherit,
and if it is not, this is treated as initial.
This keyword effectively erases all declared values occurring earlier in the cascade,
correctly inheriting or not as appropriate for the property
(or all longhands of a shorthand). The following changes were made to this specification since the 22 December 2020 Proposed Recommendation: The following changes were made to this specification since the 28 August 2018 Candidate Recommendation: The following non-trivial changes were made to this specification since the 19 May 2016 Candidate Recommendation:
The all property is a shorthand that resets all CSS properties
except direction and unicode-bidi.
…
It does not reset custom properties [css-variables-1].
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
,
with two exceptions:
A Disposition of Comments is available. The following changes were made to this specification since the 3 October 2013 Candidate Recommendation: The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [css-syntax-3]
A declaration is important if it has a !important annotation,
as defined by [css-syntax-3]
.
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. [css-backgrounds-3]
If a shorthand is specified as one of the CSS-wide keywords [css-values-3],
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.)
A Disposition of Comments is available. The following features have been added since Level 2: David Baron, Simon Sapin, and Boris Zbarsky contributed to this specification. The cascade process does not distinguish between same-origin and cross-origin stylesheets,
enabling the content of cross-origin stylesheets to be inferred
from the computed styles they apply to a document. User preferences and UA defaults expressed via application of style rules
are exposed by the cascade process,
and can be inferred from the computed styles they apply to a document. The @import rule does not apply the CORS protocol to loading cross-origin stylesheets,
instead allowing them to be freely imported and applied. The @import rule assumes that resources without Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification. All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. [RFC2119] Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with Informative notes begin with the word “Note” and are set apart from the
normative text with Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with Conformance to this specification
is defined for three conformance classes: A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module. A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.) An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module. So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers must treat as invalid (and ignore
as appropriate) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents must not selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored. To avoid clashes with future stable CSS features,
the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS. Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group. Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at https://www.w3.org/Style/CSS/Test/.
Questions should be directed to the public-css-testsuite@w3.org mailing list.4. Value Processing
4.1. Declared Values
4.2. Cascaded Values
4.3. Specified Values
4.4. Computed Values
getComputedStyle()
function,
which sometimes returns used values. [CSSOM] Furthermore, the computed value is an abstract data representation:
their definitions reflect that data representation,
not how that data is serialized.
For example, serialization rules often allow omitting certain values which are implied during parsing;
but those values are nonetheless part of the computed value.
4.5. Used Values
p
element
(which is display: block by default)
will have an effect,
even though text-transform only applies to inline boxes,
because the property inherits
into the paragraph’s anonymous root inline box. 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
6.1. Cascade Sorting Order
6.2. Cascading Origins
6.3. Important Declarations: the !important annotation
Property
Winning value
text-indent
1em
font-style
italic
font-size
12pt
font-family
sans-serif
6.4. Precedence of Non-CSS Presentational Hints
bgcolor
attribute or s
element in [HTML].
All document language-based styling must be translated to corresponding CSS rules
and either enter the cascade as UA-origin rules or
be treated as author-origin rules with a specificity of zero
placed at the start of the .
A document language may define whether such a presentational hint
enters the cascade as UA-origin or ;
if so, the UA must behave accordingly.
For example, [SVG11] maps its presentation attributes into the author level.7. Defaulting
7.1. Initial Values
7.2. Inheritance
7.3. Explicit Defaulting
7.3.1. Resetting a Property: the initial keyword
7.3.2. Explicit Inheritance: the inherit keyword
7.3.3. Erasing All Declarations: the unset keyword
8. Changes
8.1. Changes Since the 22 December 2020 Proposed Recommendation
8.2. Changes Since the 28 August 2018 Candidate Recommendation
8.3. Changes Since the 19 May 2016 Candidate Recommendation
8.4. Changes Since the 3 October 2013 Candidate Recommendation
8.5. Additions Since Level 2
Acknowledgments
Privacy and Security Considerations
Content-Type
metadata (or any same-origin file if the host document is in quirks mode)
are text/css
,
potentially allowing arbitrary files to be imported into the page
and interpreted as CSS,
potentially allowing sensitive data to be inferred from the computed styles they apply to a document. Conformance
Document conventions
class="example"
,
like this: class="note"
, like this: , like
this: UAs MUST provide an accessible alternative.
Conformance classes
Partial implementations
Implementations of Unstable and Proprietary Features
Non-experimental implementations
Index
Terms defined by this specification
Terms defined by reference
References
Normative References
Informative References
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Animation type
Canonical order
Computed value
all
initial | inherit | unset
see individual properties
see individual properties
see individual properties
see individual properties
see individual properties
per grammar
see individual properties