<pre class='metadata'>

Title: CSS Cascading and Inheritance Level 3

Shortname: css-cascade

Level: 3

Status: ED

Work Status: Completed

Implementation Report: https://drafts.csswg.org/css-cascade-3/implementation-report

Group: csswg

ED: https://drafts.csswg.org/css-cascade-3/

TR: https://www.w3.org/TR/css-cascade-3/

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199

Previous Version: https://www.w3.org/TR/2020/CR-css-cascade-3-20200817/

Previous Version: https://www.w3.org/TR/2018/CR-css-cascade-3-20180828/

Previous Version: https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/

Previous Version: https://www.w3.org/TR/2015/CR-css-cascade-3-20150416/

Previous Version: https://www.w3.org/TR/2013/WD-css-cascade-3-20130730/

Previous Version: https://www.w3.org/TR/2013/WD-css3-cascade-20130103/

Previous Version: https://www.w3.org/TR/2005/WD-css3-cascade-20051215/

Issue Tracking: Disposition of Comments https://drafts.csswg.org/css-cascade/issues

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.

Ignored Terms: auto, flex items

Include Can I Use Panels: yes

Informative Classes: ex

</pre>

<pre class=link-defaults>

spec:css-values-3; type: value; text:ex

spec:css-conditional-3; type:at-rule; text:@media

spec:mediaqueries-4; type:type; for:@media; text:all

spec:mediaqueries-4; type:type; text:<media-query>

spec:css2; type:property; text:display

spec:css2; type:value; text:red

</pre>

<pre class=ignored-specs>

spec:mediaqueries-5

spec:css-values-4

spec:css-fonts-4

</pre>

<h2 id="intro">

Introduction</h2>

CSS defines a finite set of parameters,

called <dfn export for=CSS lt="property">properties</dfn>,

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., <<color>>, <<length-percentage>>, <css>[ solid | dashed | dotted | &hellip; ]</css>),

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'', ''border-style/dotted'')

for the associated element or box.

One of the fundamental design principles of CSS is <a lt="cascade">cascading</a>,

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 <a>inheritance</a>

or by looking at the property's <a>initial value</a>.

The <a href="#cascade">cascading</a> and <a href="#defaulting">defaulting</a> process takes a set of declarations as input,

and outputs a <a>specified value</a> 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]].

<h3 id="placement">

Module Interactions</h3>

<em>This section is normative.</em>

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 <<media-query>> value type as used in this specification.

<!--

███████ ████ ██ ██ ████████ ███████ ████████ ████████

██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██ ██

██ ███ ██ ██ ████ ████ ██ ██ ██ ██ ██ ██ ██

██ ███ ██ ██ ██ ███ ██ ████████ ██ ██ ████████ ██

██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

███████ ████ ██ ██ ██ ███████ ██ ██ ██

-->

<h2 id="at-import">

Importing Style Sheets: the ''@import'' rule</h2>

The <dfn>@import</dfn> 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)

<em>explicitly</em> 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.

<p class='example'>

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:

<pre class='prod'>@import [ <<url>> | <<string>> ] <<media-query-list>>? ;</pre>

Where the <<url>> or <<string>> gives the URL of the style sheet to be imported,

and the optional <<media-query-list>>

(the <dfn>import conditions</dfn>)

states the conditions under which it applies.

If a <<string>> is provided,

it must be interpreted as a <<url>> with the same value.

<div class="example">

The following lines are equivalent in meaning

and illustrate both ''@import'' syntaxes

(one with ''url()'' and one with a bare string):

<pre class='lang-css'>

@import "mystyle.css";

@import url("mystyle.css");

</pre>

</div>

<h3 id=conditional-import>

Conditional ''@import'' Rules</h3>

The <a>import conditions</a> allow the import to be media-dependent.

In the absence of any <a>import conditions</a>, the import is unconditional.

(Specifying ''@media/all'' for the <<media-query-list>> has the same effect.)

If the <a>import conditions</a> 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.

<div class=example>

The following rules illustrate how ''@import'' rules can be made media-dependent:

<pre class='lang-css'>

@import url("fineprint.css") print;

@import url("bluish.css") projection, tv;

@import url("narrow.css") handheld and (max-width: 400px);

</pre>

</div>

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 <a>import conditions</a>

is defined by the <a href="https://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> specification [[!MEDIAQ]].

<h3 id=import-processing>

Processing Stylesheet Imports</h3>

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 <a>environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. [[css-syntax-3]]

<h3 id='content-type'>

Content-Type of CSS Style Sheets</h3>

The processing of imported style sheets depends on the actual type of the linked resource.

If the resource does not have <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type">Content-Type metadata</a>,

or the host document is in <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#quirks-mode">quirks mode</a>

and has the <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin">same origin</a> as the imported style sheet,

the type of the linked resource is <code>text/css</code>.

Otherwise, the type is determined from its <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type">Content-Type metadata</a>.

If the linked resource's type is <code>text/css</code>,

it must be interpreted as a CSS style sheet.

Otherwise, it must be interpreted as a network error.

<!--

██████ ██ ██ ███████ ████████ ████████ ██ ██ ███ ██ ██ ████████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██

██████ █████████ ██ ██ ████████ ██ █████████ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████████ ██ ████ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██

██████ ██ ██ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████

-->

<h2 id='shorthand'>

Shorthand Properties</h2>

Some properties are <dfn export lt="shorthand property | shorthand">shorthand properties</dfn>,

meaning that they allow authors to specify the values of several properties with a single property.

A <a>shorthand property</a> sets all of its <dfn export lt="longhand | longhand property | sub-property">longhand sub-properties</dfn>,

exactly as if expanded in place.

When values are omitted from a <a>shorthand</a> form,

unless otherwise defined,

each “missing” <a>sub-property</a> is assigned its <a>initial value</a>.

<div class='note'>

This means that a <a>shorthand</a> [=property declaration=] always sets <em>all</em> of its <a>sub-properties</a>,

even those that are not explicitly set.

Carelessly used, this might result in inadvertently resetting some <a>sub-properties</a>.

Carefully used, a <a>shorthand</a> can guarantee a “blank slate”

by resetting <a>sub-properties</a> 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'.

</div>

<div class='example'>

For example, the CSS Level 1 'font' property

is a <a>shorthand</a> property for setting <a property>font-style</a>, <a property>font-variant</a>, <a property>font-weight</a>, 'font-size', 'line-height', and <a property>font-family</a> all at once.

The multiple declarations of this example:

<pre class='lang-css'>

h1 {

font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal;

}

</pre>

can therefore be rewritten as

<pre class='lang-css'>h1 { font: bold 12pt/14pt Helvetica }</pre>

As more 'font' <a>sub-properties</a> are introduced into CSS,

the shorthand declaration resets those to their initial values as well.

</div>

In some cases, a <a>shorthand</a> might have different syntax

or special keywords

that don't directly correspond to values of its <a>sub-properties</a>.

(In such cases, the <a>shorthand</a> will explicitly define the expansion of its values.)

In other cases, a property might be a <dfn export>reset-only sub-property</dfn> of the shorthand:

Like other <a>sub-properties</a>, it is reset to its initial value by the shorthand when unspecified,

but the shorthand might not include syntax to set the <a>sub-property</a>

to any of its other values.

<span class=ex>For example, the 'border' shorthand resets 'border-image'

to its initial value of ''border-image/none'',

but has no syntax to set it to anything else. [[css-backgrounds-3]]</span>

If a <a>shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a> [[!css-values-3]],

it sets all of its <a>sub-properties</a> to that keyword,

including any that are <a>reset-only sub-properties</a>.

(Note that these keywords cannot be combined with other values in a single [=declaration=], not even in a shorthand.)

Declaring a <a>shorthand</a> property to be ''!important''

is equivalent to declaring all of its <a>sub-properties</a> to be ''!important''.

<h3 id="all-shorthand" caniuse="css-all">

Resetting All Properties: the 'all' property</h3>

<pre class="propdef shorthand">

Name: all

Value: initial | inherit | unset

</pre>

The 'all' property is a <a>shorthand</a>

that resets <em>all</em> CSS properties

except 'direction' and 'unicode-bidi'.

It only accepts the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a>.

It does not reset <a>custom properties</a> [[css-variables-1]].

Note: The excepted CSS properties 'direction' and 'unicode-bidi'

are actually markup-level features,

and <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">should not be set in the author's style sheet</a>.

(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 <code>dir</code> attribute, instead.

[[css-writing-modes-3]]

<div class='example'>

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 <code>&lt;div></code>)

will also be blown away.

</div>

<!--

██████ ████████ ███ ██████ ████████ ██████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██

██████ ██ ██ ██ ██ ████ ██████ ██████

██ ██ █████████ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██████ ██ ██ ██ ██████ ████████ ██████

-->

<h2 id="value-stages">

Value Processing</h2>

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:

<ol>

<li>

First, all the <a>declared values</a> applied to an element are collected,

for each property on each element.

There may be zero or many <a>declared values</a> applied to the element.

<li>

Cascading yields the <a>cascaded value</a>.

There is at most one <a>cascaded value</a> per property per element.

<li>

Defaulting yields the <a>specified value</a>.

Every element has exactly one <a>specified value</a> per property.

<li>

Resolving value dependencies yields the <a>computed value</a>.

Every element has exactly one <a>computed value</a> per property.

<li>

Formatting the document yields the <a>used value</a>.

An element only has a <a>used value</a> for a given property

if that property applies to the element.

<li>

Finally, the used value is transformed to the <a>actual value</a>

based on constraints of the display environment.

As with the <a>used value</a>, there may or may not be an <a>actual value</a>

for a given property on an element.

</ol>

<h3 id="declared">

Declared Values</h3>

Each property declaration <a href="#filtering">applied to an element</a>

contributes a <dfn export local-lt="declared">declared value</dfn> for that property

associated with the element.

See <a href="#filtering">Filtering Declarations</a> for details.

These values are then processed by the <a>cascade</a>

to choose a single “winning value”.

<h3 id="cascaded">

Cascaded Values</h3>

The <dfn export local-lt="cascaded">cascaded value</dfn>

represents the result of <a href="#cascade">the cascade</a>:

it is the <a>declared value</a> that wins the cascade

(is sorted first in the <a>output of the cascade</a>).

If the <a>output of the cascade</a> is an empty list,

there is no <a>cascaded value</a>.

<h3 id="specified">

Specified Values</h3>

The <dfn export local-lt="specified">specified value</dfn> is

the value of a given property that the style sheet authors intended for that element.

It is the result of putting the <a>cascaded value</a> through the <a href="#defaulting">defaulting</a> processes,

guaranteeing that a <a>specified value</a> exists for every property on every element.

In many cases, the <a>specified value</a> is the <a>cascaded value</a>.

However, if there is no <a>cascaded value</a> at all,

the <a>specified value</a> is <a href="#defaulting">defaulted</a>.

The [=CSS-wide keywords=] are handled specially

when they are the <a>cascaded value</a> of a property,

setting the <a>specified value</a> as required by that keyword,

see [[#defaulting-keywords]].

<h3 id="computed">

Computed Values</h3>

The <dfn export local-lt="computed">computed value</dfn> is

the result of resolving the <a>specified value</a>

as defined in the “Computed Value” line of the property definition table,

generally absolutizing it in preparation for <a>inheritance</a>.

Note: The <a>computed value</a> is the value that is transferred from parent to child during <a>inheritance</a>.

For historical reasons,

it is not necessarily the value returned by the {{getComputedStyle()}} function,

which sometimes returns <a>used values</a>. [[CSSOM]]

Furthermore, the <a>computed value</a> 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 <a>computed value</a>.

<div class="example">

A <a>specified value</a> 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:

<ul>

<li>

values with relative units

(''em'', ''ex'', ''vh'', ''vw'')

must be made absolute by multiplying with the appropriate reference size

<li>

certain keywords

(e.g., ''smaller'', ''bolder'')

must be replaced according to their definitions

<li>

percentages on some properties must be multiplied by a reference value

(defined by the property)

<li>

valid relative URLs must be resolved to become absolute.

</ul>

See examples (f), (g) and (h) in the <a href="#stages-examples">table below</a>.

</div>

Note: In general, the <a>computed value</a> resolves the <a>specified value</a>

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 <a>computed value</a> exists even when the property does not apply.

However, some properties may change how they determine the <a>computed value</a>

based on whether the property [=applies to=] the element.

<h3 id='used'>

Used Values</h3>

The <dfn export local-lt="used">used value</dfn> is

the result of taking the <a>computed value</a>

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.

<p class='example'>

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 <a>computed value</a> is ''auto'',

while the <a>used value</a> is an absolute length, such as ''100px''. [[CSS2]]

<p class='example'>

As another example, a <code>&lt;div></code> might have a computed 'break-before' value of ''auto'',

but acquire a used 'break-before' value of ''break-before/page'' by propagation from its first child. [[css-break-3]]

If a property does not <dfn lt="applies to | apply to">apply to</dfn>

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 <a>used value</a> for that property.

<p class='example'>

For example, the 'flex' property has no <a>used value</a>

on elements that aren't <a>flex items</a>.

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

<h3 id="actual">

Actual Values</h3>

A <a>used value</a> 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.

<span class=ex>For example, a user agent may only be able to render borders with integer pixel widths

and may therefore have to approximate the <a lt="used value">used</a> 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.</span>

The <dfn export local-lt="actual">actual value</dfn> 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 <a href="#stages-examples">table below</a>.

<h3 id="stages-examples">

Examples</h3>

<table class="data non-normative">

<caption>Examples of CSS Value Computation</caption>

<thead>

<tr>

<th>

<th>Property

<th>Winning declaration

<th>Cascaded value

<th>Specified value

<th>Computed value

<th>Used value

<th>Actual value

<tbody>

<tr>

<td>(a)

<th>'text-align'

<td><code class="declaration">text-align: left</code>

<td><css>left</css>

<td><css>left</css>

<td><css>left</css>

<td><css>left</css>

<td><css>left</css>

<tr>

<td>(b)

<th>'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'

<td><code class="declaration">border-width: inherit</code>

<td><css>inherit</css>

<td class="say"><css>4.2px</css>

<td><css>4.2px</css>

<td><css>4.2px</css>

<td><css>4px</css>

<tr>

<td>(c)

<th>'width'

<td><small>(none)</small>

<td><small>(none)</small>

<td><css>auto</css> <small>(initial&nbsp;value)</small>

<td><css>auto</css>

<td><css>120px</css>

<td><css>120px</css>

<tr>

<td>(d)

<th>'list-style-position'

<td><code class="declaration">list-style-position: inherit</code>

<td><css>inherit</css>

<td class="say"><css>inside</css>

<td><css>inside</css>

<td><css>inside</css>

<td><css>inside</css>

<tr>

<td>(e)

<th>'list-style-position'

<td><code class="declaration">list-style-position: initial</code>

<td><css>initial</css>

<td><css>outside</css> <small>(initial&nbsp;value)</small>

<td><css>outside</css>

<td><css>outside</css>

<td><css>outside</css>

<tr>

<td>(f)

<th>'font-size'

<td><code class="declaration">font-size: 1.2em</code>

<td><css>1.2em</css>

<td><css>1.2em</css>

<td class="say"><css>14.1px</css>

<td><css>14.1px</css>

<td><css>14px</css>

<tr>

<td>(g)

<th>'width'

<td><code class="declaration">width: 80%</code>

<td><css>80%</css>

<td><css>80%</css>

<td><css>80%</css>

<td class="say"><css>354.2px</css>

<td><css>354px</css>

<tr>

<td>(h)

<th>'width'

<td><code class="declaration">width: auto</code>

<td><css>auto</css>

<td><css>auto</css>

<td><css>auto</css>

<td class="say"><css>134px</css>

<td><css>134px</css>

<tr>

<td>(i)

<th>'height'

<td><code class="declaration">height: auto</code>

<td><css>auto</css>

<td><css>auto</css>

<td><css>auto</css>

<td class="say"><css>176px</css>

<td><css>176px</css>

<tr>

<td>(j)

<th>'page-break-after'

<td><small>(none)</small>

<td><small>(none)</small>

<td><css>auto</css> <small>(initial&nbsp;value)</small>

<td><css>auto</css>

<td><css>auto</css>

<td><css>auto</css>

<tr>

<td>(k)

<th>'orphans'

<td><code class="declaration">orphans: 3</code>

<td><css>3</css>

<td><css>3</css>

<td><css>3</css>

<td><css>3</css>

<td><css>3</css>

</table>

<!--

████████ ████ ██ ████████ ████████ ████████ ████ ██ ██ ██████

██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██

██████ ██ ██ ██ ██████ ████████ ██ ██ ██ ██ ██ ████

██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██

██ ████ ████████ ██ ████████ ██ ██ ████ ██ ██ ██████

-->

<h2 id='filtering'>

Filtering</h2>

In order to find the <a>declared values</a>,

implementations must first identify all [=declarations=] that apply to each element.

A declaration applies to an element if:

<ul>

<li>

It belongs to a style sheet that currently applies to this document.

<li>

It is not qualified by a conditional rule [[!CSS-CONDITIONAL-3]] with a false condition.

<li>

It belongs to a style rule whose selector matches the element. [[!SELECT]]

<li>

It is syntactically valid:

the declaration's property is a known property name,

and the declaration's value matches the syntax for that property.

</ul>

The values of the [=declarations=] that apply form,

for each property on each element,

a list of <a>declared values</a>.

The next section,

the <a>cascade</a>,

prioritizes these lists.

<!--

██████ ███ ██████ ██████ ███ ████████ ████████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██████ ██ ██ ██ ██ ██ ██████

██ █████████ ██ ██ █████████ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██████ ██ ██ ██████ ██████ ██ ██ ████████ ████████

-->

<h2 id='cascading'>

Cascading</h2>

The <dfn export>cascade</dfn>

takes an unordered list of <a>declared values</a>

for a given property on a given element,

sorts them by their [=declaration’s=] precedence as determined below,

and outputs a single <a>cascaded value</a>.

<h3 id="cascade-sort">

Cascade Sorting Order</h3>

The cascade sorts [=declarations=] according to the following criteria,

in descending order of precedence:

<dl>

<dt id='cascade-origin'>Origin and Importance

<dd>

The <a>origin</a> of a [=declaration=] is based on where it comes from

and its <a lt="important">importance</a> is

whether or not it is declared with ''!important''

(see [[#importance|below]]).

The precedence of the various <a>origins</a> is, in descending order:

<ol>

<li>Transition declarations [[!css-transitions-1]]

<li>[=Important=] [=user-agent origin|user agent=] declarations

<li>[=Important=] [=user origin|user=] declarations

<li>[=Important=] [=author origin|author=] declarations

<li>Animation declarations [[!css-animations-1]]

<li>[=Normal=] [=author origin|author=] declarations

<li>[=Normal=] [=user origin|user=] declarations

<li>[=Normal=] [=user-agent origin|user agent=] declarations

</ol>

Declarations from <a>origins</a> earlier in this list win over declarations from later <a>origins</a>.

<dt id='cascade-specificity'>Specificity

<dd>

The <a href="https://www.w3.org/TR/selectors/#specificity">Selectors module</a> [[!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 <a href="https://www.w3.org/TR/css-style-attr/#interpret">contents of a style attribute</a>)

are considered to have a specificity higher than any selector.

The declaration with the highest specificity wins.

<dt id='cascade-order'>Order of Appearance

<dd>

The last declaration in document order wins.

For this purpose:

<ul>

<li>Declarations from <a at-rule lt="@import">imported style sheets</a>

are ordered as if their style sheets were substituted in place of the ''@import'' rule.

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

<li>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]]

</ul>

</dl>

The <dfn export>output of the cascade</dfn>

is a (potentially empty) sorted list of <a>declared values</a> for each property on each element.

<h3 id='cascading-origins'>

Cascading Origins</h3>

Each style rule has a <dfn id=origin export local-lt="origin">cascade origin</dfn>,

which determines where it enters the cascade.

CSS defines three core <a>origins</a>:

<dl>

<dt><dfn export id='cascade-origin-author' lt="author origin|author style sheet|author-origin">Author Origin</dfn>

<dd>

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.

<dt><dfn export id='cascade-origin-user' lt="user origin|user style sheet|user-origin">User Origin</dfn>

<dd>

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

<dt><dfn export id='cascade-origin-ua' lt="user-agent origin|UA origin|user-agent style sheet|UA style sheet|UA-origin">User-Agent Origin</dfn>

<dd>

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 <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">HTML user agent style sheet</a>. [[HTML]]

</dl>

Extensions to CSS define the following additional <a>origins</a>:

<dl>

<dt><dfn export id='cascade-origin-animation'>Animation Origin</dfn>

<dd>

CSS Animations [[css-animations-1]] generate “virtual” rules representing their effects when running.

<dt><dfn export id='cascade-origin-transition'>Transition Origin</dfn>

<dd>

Like CSS Animations, CSS Transitions [[css-transitions-1]] generate “virtual” rules representing their effects when running.

</dl>

<h3 id='importance'>

Important Declarations: the ''!important'' annotation</h3>

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 <dfn export local-lt="importance">important</dfn>

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 <dfn>normal</dfn> (non-[=important=]).

<div class='example'>

<pre class='lang-css'>[hidden] { display: none !important; }</pre>

</div>

An <a>important</a> 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 origin|author=] and [=user origin|user=] declarations.

<div class='example'>

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 <a>shorthand</a> 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.

<pre class='lang-css'>

/* From the user's style sheet */

p { text-indent: 1em !important }

p { font-style: italic !important }

p { font-size: 18pt }

/* From the author's style sheet */

p { text-indent: 1.5em !important }

p { font: normal 12pt sans-serif !important }

p { font-size: 24pt }

</pre>

<table class="data">

<thead>

<tr>

<th>Property

<th>Winning value

<tbody>

<tr>

<th>'text-indent'

<td>''1em''

<tr>

<th>'font-style'

<td>''font-style/italic''

<tr>

<th>'font-size'

<td>''12pt''

<tr>

<th>'font-family'

<td>''sans-serif''

</table>

</div>

<h3 id="preshint">

Precedence of Non-CSS Presentational Hints</h3>

The UA may choose to honor presentational hints in a source document's markup,

for example the <code>bgcolor</code> 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 [=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.

<!--

████████ ████████ ████████ ███ ██ ██ ██ ████████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██████ ██████ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ █████████ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

████████ ████████ ██ ██ ██ ███████ ████████ ██

-->

<h2 id="defaulting">

Defaulting</h2>

When the <a>cascade</a> does not result in a value,

the <a>specified value</a> must be found some other way.

<a>Inherited properties</a> draw their defaults from their parent element through <a>inheritance</a>;

all other properties take their <a>initial value</a>.

Authors can explicitly request inheritance or initialization

via the ''inherit'' and ''initial'' keywords.

<h3 id="initial-values">

Initial Values</h3>

Each property has an <dfn export>initial value</dfn>,

defined in the property's definition table.

If the property is not an <a>inherited property</a>,

and the <a>cascade</a> does not result in a value,

then the <a>specified value</a> of the property is its <a>initial value</a>.

<h3 id="inheriting">

Inheritance</h3>

<dfn export for="CSS" lt="inheritance|inherit">Inheritance</dfn> propagates property values from parent elements to their children.

The <dfn export>inherited value</dfn> of a property on an element

is the <a>computed value</a> of the property on the element's parent element.

For the root element,

which has no parent element,

the <a>inherited value</a> is the <a>initial value</a> of the property.

[=Pseudo-elements=] inherit according to the fictional tag sequence

described for each [=pseudo-element=]. [[!SELECT]]

Some properties are <dfn export lt="inherited property">inherited properties</dfn>,

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 <a href="https://www.w3.org/TR/CSS2/visuren.html#box-gen">anonymous boxes</a>,

or otherwise affected by manipulations of the box tree.

<h3 id="defaulting-keywords">

Explicit Defaulting</h3>

Several CSS-wide property values are defined below;

declaring a property to have these values explicitly specifies a particular defaulting behavior.

As specified in <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS Values and Units</a> [[!css-values-3]],

all CSS properties can accept these values.

<h4 id="initial" caniuse="css-initial-value">

Resetting a Property: the ''initial'' keyword</h4>

The <dfn value for=all>initial</dfn> [=CSS-wide keyword=]

represents the value defined as the property's [=initial value=].

If the <a>cascaded value</a> of a property is

the ''initial'' keyword,

the property's <a>specified value</a> is its <a>initial value</a>.

<h4 id="inherit">

Explicit Inheritance: the ''inherit'' keyword</h4>

The <dfn value for=all>inherit</dfn> [=CSS-wide keyword=]

represents the property’s [=computed value=] on the parent element.

If the <a>cascaded value</a> of a property is

the ''inherit'' keyword,

the property's <a lt="specified value">specified</a> and <a>computed values</a> are the <a>inherited value</a>.

<h4 id="inherit-initial" caniuse="css-unset-value">

Erasing All Declarations: the ''unset'' keyword</h4>

The <dfn value for=all>unset</dfn> [=CSS-wide keyword=]

acts as either ''inherit'' or ''initial'',

depending on whether the property is [=inherited property|inherited=] or not.

If the <a>cascaded value</a> 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 <a>declared values</a> occurring earlier in the <a>cascade</a>,

correctly inheriting or not as appropriate for the property

(or all longhands of a <a>shorthand</a>).