@import "mystyle.css" supports(display: flex);
		@import "mystyle.css" supports((display: flex));
		

Processing Stylesheet Imports

Content-Type of CSS Style Sheets

Shorthand Properties

		h1 {
			font-weight: bold;
			font-size: 12pt;
			line-height: 14pt;
			font-family: Helvetica;
			font-variant: normal;
			font-style: normal;
		}
		

h1 { font: bold 12pt/14pt Helvetica }

Aliasing

legacy name aliases

When the old property’s value syntax is identical to that of the new property, the two names are aliased with an operation on par with case-mapping: at parse time, the old property is converted into the new property. This conversion also applies in the CSSOM, both for string arguments and property accessors: requests for the old property name transparently transfer to the new property name instead.

For example, if old-name is a legacy name alias for new-name, getComputedStyle(el).oldName will return the computed style of the newName property, and el.style.setPropertyValue("old-name", "value") will set the new-name property to "value".

legacy shorthands

When the old property has a distinct syntax from the new property, the two names are aliased using the shorthand mechanism. These shorthands are defined to be legacy shorthands, and their use is deprecated. They otherwise behave exactly as regular shorthands, except that the CSSOM will not use them when serializing declarations. [[CSSOM]]

For example, the 'page-break-*' properties are legacy shorthands for the 'break-*' properties (see [[css-break-3#page-break-properties]]). Setting ''page-break-before: always'' expands to ''break-before: page'' at parse time, like other shorthands do. Similarly, if ''break-before: page'' is set, calling getComputedStyle(el).pageBreakBefore will return "always". However, when serializing a style block (see [[cssom-1#serializing-css-values]]), the 'page-break-before' property will never be chosen as the shorthand to serialize to, regardless of whether it or 'break-before' was specified; instead, 'break-before' will always be chosen.

Resetting All Properties: the 'all' property

	Name: all
	Value: initial | inherit | unset | revert | revert-layer
	

Value Processing

1. 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.
2. Cascading yields the cascaded value. There is at most one cascaded value per property per element.
3. Defaulting yields the specified value. Every element has exactly one specified value per property.
4. Resolving value dependencies yields the computed value. Every element has exactly one computed value per property.
5. 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.
6. 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.

Declared Values

Cascaded Values

Specified Values

Computed Values

Used Values

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 <div> 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 [=apply to=] this element or box type then it 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=].

Applicable Properties

Actual Values

Examples

Per-Fragment Value Processing

Filtering

• 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]] (Taking scoping into account, if necessary.)
• It is syntactically valid: the declaration's property is a known property name, and the declaration's value matches the syntax for that property.

Cascading

Cascade Sorting Order

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 [[#importance|below]]). The precedence of the various origins is, in descending order:

1. Transition declarations [[!css-transitions-1]]
2. [=Important=] [=user-agent origin|user agent=] declarations
3. [=Important=] [=user origin|user=] declarations
4. [=Important=] [=author origin|author=] declarations
5. Animation declarations [[!css-animations-1]]
6. [=Normal=] [=author origin|author=] declarations
7. [=Normal=] [=user origin|user=] declarations
8. [=Normal=] [=user-agent origin|user agent=] declarations

Declarations from origins earlier in this list win over declarations from later origins.

Context

A document language can provide for blending declarations sourced from different encapsulation contexts, such as the nested [=tree contexts=] of [=shadow trees=] in the [[!DOM]]. When comparing two declarations that are sourced from different [=encapsulation contexts=], then for [=normal=] rules the declaration from the outer context wins, and for [=important=] rules the declaration from the inner context wins. For this purpose, [[DOM]] [=tree contexts=] are considered to be nested in [=shadow-including tree order=]. Note: This effectively means that [=normal=] declarations belonging to an [=encapsulation context=] can set defaults that are easily overridden by the outer context, while [=important=] declarations belonging to an [=encapsulation context=] can enforce requirements that cannot be overridden by the outer context.

The Style Attribute

Separately for [=normal=] and [=important=] declarations, declarations that are attached directly to an element (such as the contents of a style attribute) rather than indirectly mapped by means of a style rule selector take precedence over declarations the same [=importance=] that are mapped via style rule.

Layers

Declarations within each [=origin=] and [=context=] can be explicitly assigned to a [=cascade layer=]. For the purpose of this step, any declaration not assigned to an explicit layer is added to an implicit final layer. Cascade layers (like declarations) are ordered by order of appearance. When comparing declarations that belong to different layers, then for [=normal=] rules the declaration whose [=cascade layer=] is last wins, and for [=important=] rules the declaration whose [=cascade layer=] is first wins. Note: This follows the same logic used for layering [=normal=] and [=important=] [=origins=], so that the ''!important'' flag maintains the same “override” purpose in both settings.

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. The declaration with the highest specificity wins.

Order of Appearance

The last declaration in document order wins. For this purpose:

• Style sheets are ordered as in final CSS style sheets.
• 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.

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

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.

Important Declarations: the ''!important'' annotation

[hidden] { display: none !important; }

		/* 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 }
		

Cascade Layers

			@layer utilities {
			  .padding-small {
			    /* specificity of 0,1,0 - explicit "utilities" layer */
			    padding: 0.25em;
			  }
			}

			.card > .content {
			  /* specificity of 0,2,0 - implicit (first) layer */
			  padding: 1em;
			}
		

			/* establish the layer order, so the "override" layer takes precedence */
			@layer framework, override;

			@layer override {
			  @keyframes slide-left {
			    from { translate: 0; }
			    to { translate: -100% 0; }
			  }
			}

			@layer framework {
			  @keyframes slide-left {
			    from { margin-left: 0; }
			    to { margin-left: -100%; }
			  }
			}

			.sidebar { animation: slide-left 300ms; }
		

Declaring Cascade Layers

Layer Naming and Nesting

			@import url(headings.css) layer(default);
			@import url(links.css) layer(default);

			@layer default {
			  audio[controls] {
			    display: block;
			  }
			}
		

			@layer base {
			  p { max-width: 70ch; }
			}

			@layer framework {
			  @layer base {
			    p { margin-block: 0.75em; }
			  }

			  @layer theme {
			    p { color: #222; }
			  }
			}
		

		<> = <> [ '.' <> ]*
	

			@layer framework {
			  @layer default {
			     p { margin-block: 0.75em; }
			  }

			  @layer theme {
			    p { color: #222; }
			  }
			}

			@layer framework.theme {
			  /* These styles will be added to the theme layer inside the framework layer */
			  blockquote { color: rebeccapurple; }
			}
		

			@layer { /* layer 1 */ }
			@layer { /* layer 2 */ }
			

			@layer {
			  @layer foo { /* layer 1 */ }
			  @layer foo { /* also layer 1 */ }
			}
			

			@layer {
			  @layer foo { /* layer 1 */ }
			}
			@layer {
			  @layer foo { /* layer 2 */ }
			}
			

			/* bootstrap-base.css */
			/* unnamed wrapper layers around each sub-file */
			@import url(base-forms.css) layer;
			@import url(base-links.css) layer;
			@import url(base-headings.css) layer;
		

			/* bootstrap.css */
			/* the internal names are hidden from access, subsumed in "base" */
			@import url(bootstrap-base.css) layer(base);
		

			/* author.css */
			/* author has access to bootstrap.base layer, but not into unnamed layers */
			@import url(bootstrap.css) layer(bootstrap);

			/* Adds additional styles to the bootstrap layer: */
			@layer bootstrap {...}
		

			@layer framework.default {
			  strong { font-weight: bold; }
			}

			@layer utilities {
			  [hidden] { display: none; }
			}

			@layer framework {
			  .title { font-weight: 100; }

			  @layer theme {
			    h1, h2 { color: maroon; }
			  }
			}

			/* unlayered styles come first in the layer order */
			h1 { color: darkslateblue; }
		

			@media (min-width: 30em) {
			  @layer layout {
			    .title { font-size: x-large; }
			  }
			}

			@media (prefers-color-scheme: dark) {
			  @layer theme {
			    .title { color: white; }
			  }
			}

			@layer theme layout;
		

		@layer <>? {
			<>
		}
	

		@layer framework {
			h1, h2 { color: maroon; background: white;}

			@media (prefers-color-scheme: dark) {
				h1, h2 { color: red; background: black; }
			}
		}
		

		@layer <>#;
	

			@layer default;
			@import url(theme.css) layer(theme);
			@layer components;

			@layer default {
			  audio[controls] {
			    display: block;
			  }
			}
		

			@layer default, theme, components;
			@import url(theme.css) layer(theme);

			@layer default {
			  audio[controls] {
			    display: block;
			  }
			}