CSS Cascading and Inheritance Level 3
CSS Cascading and Inheritance Level 3
Editor’s Draft
17 December 2025
More details about this document
This version:
Latest published version:
Previous Versions:
Implementation Report:
Feedback:
CSSWG Issues Repository
Disposition of Comments
Editors:
Elika J. Etemad / fantasai
Apple
Tab Atkins Jr.
Google
Suggest an Edit for this Spec:
GitHub Editor
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
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, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-cascade” in the title, like this:
“[css-cascade]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
1.
Introduction
CSS defines a finite set of parameters,
called
properties
that direct the rendering of a document.
Each
property
has a name
(e.g.,
color
font-size
, or
border-style
),
a value space
(e.g.,
[ solid | dashed | dotted | … ]
),
and a defined behavior on the rendering of the document.
Properties values are assigned to various parts of the document
via
property declarations
which assign the property a value
(e.g.
red
12pt
dotted
for the associated element or box.
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
value type as used in this specification.
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
or
gives the URL of the style sheet to be imported,
and the optional
(the
import conditions
states the conditions under which it applies.
If a
is provided,
it must be interpreted as a
with the same value.
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"
);
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
has the same effect.)
If the
import conditions
do 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.
The following rules illustrate how
@import
rules can be made media-dependent:
@import
url
"fineprint.css"
@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
cascade origin
of an imported style sheet is the
cascade 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.
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
This means that a
shorthand
property declaration
always sets
all
of its
sub-properties
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 with
background-image
For example, the CSS Level 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
12
pt
line-height
14
pt
font-family
Helvetica
font-variant
normal
font-style
normal
can therefore be rewritten as
h1
font
bold
12
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]
For example, if an author specifies
all: initial
on an element,
it will block all inheritance and reset all properties,
as if no rules appeared in the author, user, or user-agent levels 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.
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
will also be blown away.
4.
Value Processing
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:
First, all the
declared values
applied to an element are collected,
for each property on each element.
There may be zero or many
declared values
applied to the element.
Cascading yields the
cascaded value
There is at most one
cascaded value
per property per element.
Defaulting yields the
specified value
Every element has exactly one
specified value
per property.
Resolving value dependencies yields the
computed value
Every element has exactly one
computed value
per property.
Formatting the document yields the
used value
An element only has a
used value
for a given property
if that property applies to the element.
Finally, the used value is transformed to the
actual value
based on constraints of the display environment.
As with the
used value
, there may or may not be an
actual value
for a given property on an element.
4.1.
Declared Values
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”.
4.2.
Cascaded Values
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
4.3.
Specified Values
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
4.4.
Computed Values
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
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
specified value
can be either absolute (i.e., not relative to another value, as in
red
or
2mm
or relative (i.e., relative to another value, as in
auto
2em
).
Computing a relative value generally absolutizes it:
values with relative units
em
ex
vh
vw
must be made absolute by multiplying with the appropriate reference size
certain keywords
(e.g.,
smaller
bolder
must be replaced according to their definitions
percentages on some properties must be multiplied by a reference value
(defined by the property)
valid relative URLs must be resolved to become absolute.
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.
4.5.
Used Values
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.
The effect of the
zoom
property is applied during this stage,
and before any calculations that require layout.
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
might have a computed
break-before
value of
auto
but acquire a used
break-before
value of
page
by propagation from its first child.
[css-break-3]
If a property does not
apply to
this element or box type—as noted in its “Applies to” line—then does not directly take effect on that type of box or element,
and therefore has no
used value
for that property.
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
4.6.
Actual Values
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
4.7.
Examples
Examples of CSS Value Computation
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
5.
Filtering
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:
It belongs to a style sheet that currently applies to this document.
It is not qualified by a conditional rule
[CSS-CONDITIONAL-3]
with a false condition.
It belongs to a style rule whose selector matches the element.
[SELECT]
It is syntactically valid:
the declaration’s property is a known property name,
and the declaration’s value matches the syntax for that property.
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.
6.
Cascading
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
6.1.
Cascade Sorting Order
The cascade sorts
declarations
according to the following criteria,
in descending order of precedence:
Origin and Importance
The
origin
of a
declaration
is based on where it comes from
and its
importance
is
whether or not it is declared with
!important
(see
below
).
The precedence of the various
origins
is, in descending order:
Transition declarations
[css-transitions-1]
Important
user agent
declarations
Important
user
declarations
Important
author
declarations
Animation declarations
[css-animations-1]
Normal
author
declarations
Normal
user
declarations
Normal
user agent
declarations
Declarations from
origins
earlier in this list win over declarations from later
origins
Specificity
The
Selectors module
[SELECT]
describes how to compute the specificity of a selector.
Each declaration has the same specificity as the style rule it appears in.
For the purpose of this step,
declarations that do not belong to a style rule
(such as the
contents of a style attribute
are considered to have a specificity higher than any selector.
The declaration with the highest specificity wins.
Order of Appearance
The last declaration in document order wins.
For this purpose:
Declarations from
imported style sheets
are ordered as if their style sheets were substituted in place of the
@import
rule.
Declarations from style sheets independently linked by the originating document
are treated as if they were concatenated in linking order,
as determined by the host document language.
Declarations from style attributes
are ordered according to the document order of the element the style attribute appears on,
and are all placed after any style sheets.
[CSSSTYLEATTR]
The
output of the cascade
is a (potentially empty) sorted list of
declared values
for each property on each element.
6.2.
Cascading Origins
Each style rule has a
cascade origin
which determines where it enters the cascade.
CSS defines three core
origins
Author Origin
The author specifies style sheets for a source document
according to the conventions of the document language.
For instance, in HTML,
style sheets may be included in the document or linked externally.
User Origin
The user may be able to specify style information for a particular document.
For example, the user may specify a file that contains a style sheet
or the user agent may provide an interface that generates a user style sheet
(or behaves as if it did).
User-Agent Origin
Conforming user agents must apply a default style sheet
(or behave as if they did).
A user agent’s default style sheet should present the elements of the document language
in ways that satisfy general presentation expectations for the document language
(e.g., for visual browsers, the EM element in HTML is presented using an italic font).
See e.g. the
HTML user agent style sheet
[HTML]
Extensions to CSS define the following additional
origins
Animation Origin
CSS Animations
[css-animations-1]
generate “virtual” rules representing their effects when running.
Transition Origin
Like CSS Animations, CSS Transitions
[css-transitions-1]
generate “virtual” rules representing their effects when running.
6.3.
Important Declarations: the
!important
annotation
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.
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
).
hidden
display
none !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 first rule in the user’s style sheet in the following example contains an
!important
declaration,
which overrides the corresponding declaration in the author’s style sheet.
The declaration in the second rule will also win due to being marked
!important
However, the third declaration in the user’s style sheet is not
!important
and will therefore lose to the second rule in the author’s style sheet
(which happens to set style on a
shorthand
property).
Also, the third author rule will lose to the second author rule since the second declaration is
!important
This shows that
!important
declarations have a function also within author style sheets.
/* From the user's style sheet */
text-indent
em
!important
font-style
italic !important
font-size
18
pt
/* From the author's style sheet */
text-indent
1.5
em
!important
font
normal
12
pt
sans-serif !important
font-size
24
pt
Property
Winning value
text-indent
1em
font-style
italic
font-size
12pt
font-family
sans-serif
6.4.
Precedence of Non-CSS Presentational Hints
The UA may choose to honor presentational hints in a source document’s markup,
for example the
bgcolor
attribute or
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
author style sheet
A document language may define whether such a presentational hint
enters the
cascade
as
UA-origin
or
author-origin
if so, the UA must behave accordingly.
For example,
[SVG11]
maps its presentation attributes into the author level.
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
author-origin
rules
can be overridden by
author-origin
styles,
but not by non-important
user-origin
styles.
Host languages should choose the appropriate origin for presentational hints
with these considerations in mind.
7.
Defaulting
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.
7.1.
Initial Values
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
7.2.
Inheritance
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.
7.3.
Explicit Defaulting
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
[css-values-3]
all CSS properties can accept these values.
7.3.1.
Resetting a Property: the
initial
keyword
The
initial
CSS-wide keyword
represents the value defined as the property’s
initial value
If the
cascaded value
of a property is
the
initial
keyword,
the property’s
specified value
is its
initial value
7.3.2.
Explicit Inheritance: the
inherit
keyword
The
inherit
CSS-wide keyword
represents the property’s
computed value
on the parent element.
If the
cascaded value
of a property is
the
inherit
keyword,
the property’s
specified
and
computed values
are the
inherited value
7.3.3.
Erasing All Declarations: the
unset
keyword
The
unset
CSS-wide keyword
acts as either
inherit
or
initial
depending on whether the property is
inherited
or not.
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
).
8.
Changes
See also
Changes prior to reaching Recommendation
8.1.
Changes Since the 11 February 2021 Recommendation
Non-trivial changes since the
11 February 2021 Recommendation
include:
Added a paragraph to the introduction to define the term
property
Issue 5633
8.2.
Additions Since Level 2
The following features have been added since
Level 2
The
all
shorthand
The
initial
keyword
The
unset
keyword
Incorporation of animations and transitions into the
cascade
Acknowledgments
David Baron,
Simon Sapin,
and Boris Zbarsky
contributed to this specification.
Privacy Considerations
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 assumes that resources without
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.
Security Considerations
The
@import
rule does not apply the
CORS protocol
to loading cross-origin stylesheets,
instead allowing them to be freely imported and applied.
Conformance
Document conventions
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
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
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.
Partial implementations
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.
Implementations of Unstable and Proprietary Features
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.
Non-experimental implementations
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
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
actual
, in § 4.6
actual value
, in § 4.6
all
, in § 3.1
Animation Origin
, in § 6.2
applies to
, in § 4.5
apply to
, in § 4.5
author origin
, in § 6.2
author-origin
, in § 6.2
author style sheet
, in § 6.2
cascade
, in § 6
cascaded
, in § 4.2
cascaded value
, in § 4.2
cascade origin
, in § 6.2
computed
, in § 4.4
computed value
, in § 4.4
declared
, in § 4.1
declared value
, in § 4.1
@import
, in § 2
importance
, in § 6.3
important
, in § 6.3
import conditions
, in § 2
inherit
dfn for CSS
, in § 7.2
value for all
, in § 7.3.2
inheritance
, in § 7.2
inherited property
, in § 7.2
inherited value
, in § 7.2
initial
, in § 7.3.1
initial value
, in § 7.1
longhand
, in § 3
longhand property
, in § 3
normal
, in § 6.3
origin
, in § 6.2
output of the cascade
, in § 6.1
property
, in § 1
reset-only sub-property
, in § 3
shorthand
, in § 3
shorthand property
, in § 3
specified
, in § 4.3
specified value
, in § 4.3
sub-property
, in § 3
Transition Origin
, in § 6.2
UA origin
, in § 6.2
UA-origin
, in § 6.2
UA style sheet
, in § 6.2
unset
, in § 7.3.3
used
, in § 4.5
used value
, in § 4.5
user-agent origin
, in § 6.2
user-agent style sheet
, in § 6.2
user origin
, in § 6.2
user-origin
, in § 6.2
user style sheet
, in § 6.2
Terms defined by reference
[ANIMATION-TRIGGERS-1]
defines the following terms:
auto
[CSS-BACKGROUNDS-3]
defines the following terms:
background
background-color
background-image
border
border-bottom-width
border-image
border-left-width
border-right-width
border-style
border-top-width
dotted
[CSS-BREAK-3]
defines the following terms:
break-before
orphans
[CSS-BREAK-4]
defines the following terms:
page
[CSS-COLOR-4]
defines the following terms:
color
[CSS-COLOR-5]
defines the following terms:
[CSS-CONDITIONAL-3]
defines the following terms:
@media
[CSS-DISPLAY-4]
defines the following terms:
display type
[CSS-FLEXBOX-1]
defines the following terms:
flex
flex item
[CSS-LISTS-3]
defines the following terms:
list-style-position
[CSS-NAMESPACES-3]
defines the following terms:
@namespace
[CSS-PSEUDO-4]
defines the following terms:
::after
::before
[CSS-SIZING-3]
defines the following terms:
height
width
[CSS-SYNTAX-3]
defines the following terms:
@charset
declaration
environment encoding
property declarations
[CSS-TEXT-3]
defines the following terms:
text-align
[CSS-TEXT-4]
defines the following terms:
text-indent
[CSS-VALUES-3]
defines the following terms:
CSS-wide keywords
em
ex
url()
vh
vw
[CSS-VALUES-4]
defines the following terms:
[CSS-VARIABLES-2]
defines the following terms:
custom property
[CSS-VIEWPORT-1]
defines the following terms:
zoom
[CSS-WRITING-MODES-3]
defines the following terms:
direction
unicode-bidi
[CSS2]
defines the following terms:
display
line-height
page-break-after
red
[CSSOM]
defines the following terms:
declarations
getComputedStyle(elt)
[FETCH]
defines the following terms:
CORS protocol
[HTML]
defines the following terms:
[MEDIAQ]
defines the following terms:
media type
[SELECTORS-4]
defines the following terms:
pseudo-elements
References
Normative References
[CSS-ANIMATIONS-1]
David Baron; et al.
CSS Animations Level 1
. URL:
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. URL:
[CSS-COLOR-5]
Chris Lilley; Una Kravets; Lea Verou.
CSS Color Module Level 5
. URL:
[CSS-CONDITIONAL-3]
Chris Lilley; David Baron; Elika Etemad.
CSS Conditional Rules Module Level 3
. URL:
[CSS-NAMESPACES-3]
Elika Etemad.
CSS Namespaces Module Level 3
. URL:
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin.
CSS Syntax Module Level 3
. URL:
[CSS-TRANSITIONS-1]
Chris Marrin; et al.
CSS Transitions Module Level 1
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-VARIABLES-2]
CSS Custom Properties for Cascading Variables Module Level 2
. Editor's Draft. URL:
[CSS-VIEWPORT-1]
Florian Rivoal; Emilio Cobos Álvarez.
CSS Viewport Module Level 1
. URL:
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. URL:
[CSSSTYLEATTR]
Tantek Çelik; Elika Etemad.
CSS Style Attributes
. URL:
[FETCH]
Anne van Kesteren.
Fetch Standard
. Living Standard. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[MEDIAQ]
Tab Atkins Jr.; Florian Rivoal.
Media Queries Level 4
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SELECT]
Tantek Çelik; et al.
Selectors Level 3
. URL:
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr..
Selectors Level 4
. URL:
Non-Normative References
[ANIMATION-TRIGGERS-1]
Animation Triggers
. Editor's Draft. URL:
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 3
. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-FLEXBOX-1]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov.
CSS Flexible Box Layout Module Level 1
. URL:
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr..
CSS Lists and Counters Module Level 3
. URL:
[CSS-PAGE-3]
Elika Etemad.
CSS Paged Media Module Level 3
. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. URL:
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal.
CSS Text Module Level 3
. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. URL:
[CSS-VARIABLES-1]
Tab Atkins Jr..
CSS Custom Properties for Cascading Variables Module Level 1
. URL:
[SVG11]
Erik Dahlström; et al.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
. 16 August 2011. REC. URL:
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
MDN
all
In all current engines.
Firefox
27+
Safari
9.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
inherit
In all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
4+
Edge
79+
Edge (Legacy)
12+
IE
8+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
initial
In all current engines.
Firefox
19+
Safari
1.2+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
13+
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
revert
In all current engines.
Firefox
67+
Safari
9.1+
Chrome
84+
Opera
Edge
84+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
unset
In all current engines.
Firefox
27+
Safari
9.1+
Chrome
41+
Opera
Edge
79+
Edge (Legacy)
13+
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
CanIUse
Support:
Android Browser
4.4.3+
Baidu Browser
13.52+
Blackberry Browser
None
Chrome
37+
Chrome for Android
147+
Edge
79+
Firefox
27+
Firefox for Android
150+
IE
None
IE Mobile
None
KaiOS Browser
2.5+
Opera
24+
Opera Mini
None
Opera Mobile
80+
QQ Browser
14.9+
Safari
9.1+
Safari on iOS
9.3+
Samsung Internet
4+
UC Browser for Android
15.5+
Source:
caniuse.com
as of 2026-04-22
CanIUse
Support:
Android Browser
2.3+
Baidu Browser
13.52+
Blackberry Browser
7+
Chrome
4+
Chrome for Android
147+
Edge
12+
Firefox
19+
Firefox for Android
150+
IE
None
IE Mobile
None
KaiOS Browser
2.5+
Opera
15+
Opera Mini
None
Opera Mobile
80+
QQ Browser
14.9+
Safari
3.2+
Safari on iOS
4.0+
Samsung Internet
4+
UC Browser for Android
15.5+
Source:
caniuse.com
as of 2026-04-22
CanIUse
Support:
Android Browser
147+
Baidu Browser
13.52+
Blackberry Browser
None
Chrome
41+
Chrome for Android
147+
Edge
13+
Firefox
27+
Firefox for Android
150+
IE
None
IE Mobile
None
KaiOS Browser
2.5+
Opera
28+
Opera Mini
None
Opera Mobile
80+
QQ Browser
14.9+
Safari
9.1+
Safari on iOS
9.3+
Samsung Internet
4+
UC Browser for Android
15.5+
Source:
caniuse.com
as of 2026-04-22
US