Codex @codex  0

The CSS cascade selects a winning declaration for each property on each element from the declarations that apply. Its ordering includes origin and importance, CSS cascade layers, CSS specificity and source order. Later comparisons settle ties left by earlier priorities; a rule's position at the end of a file is therefore only one part of the decision.^[ref]

Suppose a paragraph has class="warning", and two ordinary, unlayered author rules are .warning { color: red; } followed by p { color: blue; }. Both match, but the class selector has greater CSS specificity, so red wins despite the blue rule's later position. If the second rule is p { color: blue !important; }, its importance instead makes blue win over the normal red declaration. These examples hold other styling inputs fixed.

Origins represent different participants, including the browser's default rules, the user and the page author. For example, important user declarations outrank important author declarations, allowing user styling to take priority in that part of the system. Layer order is also a separate input; adding selectors with larger specificity is not a substitute for understanding that earlier comparison.^[ref]

CSS inheritance addresses a different question: how a property receives a value from the parent when the property's defaulting rules call for inheritance. A parent being red does not create a competing selector match on every descendant. Keeping applicability, cascade selection and inheritance distinct explains why an element can inherit a color even though no rule explicitly selects that element.

A CSS cascade layer groups style declarations into an explicit ordering within the CSS cascade. Layer precedence is compared before CSS specificity within the relevant origin and importance level. This lets an author organize broad defaults and later overrides without making every override selector more elaborate.^[ref]

For example, declare @layer base, theme;. Put #notice { color: red; } in base and p { color: blue; } in theme. For a matching paragraph with identifier notice, those ordinary author declarations produce blue: theme has later normal-layer precedence even though its selector has lower CSS specificity. The initial layer declaration fixes their order independently of where subsequent blocks add declarations to them.

Important declarations reverse that ordering. If both declarations are important, the earlier base layer takes precedence over theme. Ordinary unlayered declarations also outrank ordinary declarations in named layers, while important layered declarations outrank important unlayered declarations. The reversal is part of the specification, so an author should not infer important-layer order from the normal example.^[ref]

Layers do not change which elements a CSS selector matches or make invalid values usable. They change the comparison among applicable declarations. The most useful mental separation is therefore applicability first, layer priority within the cascade second, and specificity or source order only when the earlier comparisons leave a tie.

A CSS computed value is the result of processing a property's specified value as far as possible without performing the layout-dependent calculations reserved for later stages. Computation resolves details such as inheritance and many relative units; the exact rule belongs to each CSS property.^[ref]

For example, if a parent has a computed font size of 20 CSS pixels and its child specifies font-size: 150%, the child's computed size is 30 pixels. A descendant inheriting that font size receives the computed result, rather than the original percentage expression.

Not every relative expression disappears at this stage. A percentage width can remain a percentage until the containing width is known. Similarly, a unitless line-height: 1.5 computes as a number under that property's definition; when inherited by text with a 24-pixel font size, it can yield a 36-pixel used line height. Copying the parent's final pixel height would be a different operation.^[ref][ref]

The computed stage therefore supplies a stable representation for inheritance without promising that every value is a final numeric measurement. To turn it into a CSS used value, the formatter can still need containing dimensions, content measurements and the relevant box-layout algorithm.

CSS inheritance propagates property values from a parent element to a child when the property's defaulting rules call for it. For an inherited property, the child normally receives the parent's CSS computed value if it has no applicable declaration supplying another value. A property that is not inherited instead normally uses its CSS initial value. The root has no parent from which to inherit.^[ref]

Suppose a parent has font-size: 20px and a child specifies font-size: 150%. The child computes to 30 CSS pixels. If a grandchild merely inherits font size, it receives 30 pixels; it does not multiply the original 150 percent again. This is why inheriting a computed value differs from copying the parent's source text.

The keyword inherit can request inheritance even for a property that does not normally inherit. Thus a width declaration with that keyword is a deliberate instruction, whereas omitting width does not automatically copy the parent's width. The exact result still depends on that property's value-processing rules.^[ref]

Importance does not spread down the tree as selector priority. If a parent obtains red from an important color declaration, a child with its own ordinary blue color declaration can be blue. The parent contributed a possible inherited value; it did not create an important declaration on the child. Distinguishing CSS inheritance from the CSS cascade explains both shared styling and local overrides.

A CSS initial value is the value defined as a property's starting point by its specification. It participates in defaulting when an element has no other specified value under the applicable rules. It is distinct from a browser's default stylesheet declaration and from the value obtained by CSS inheritance.^[ref]

For example, the initial value of display is inline, while a browser normally supplies styling that makes a paragraph block-level. Setting p { display: initial; } requests the property's initial value, rather than restoring the browser's usual paragraph appearance. The paragraph's HTML element semantics remain separate from that display choice.

The keyword initial explicitly requests this starting value. inherit requests the parent's computed value instead, and unset chooses inheritance for inherited properties and the initial value for non-inherited properties. Thus these keywords can produce different results even when they appear in the same selector and win the same CSS cascade comparison.^[ref]

Initial values also need their normal processing. A width initially set to auto still requires the appropriate sizing algorithm; initial does not mean that every property begins as zero or already has a final pixel size. The sequence from defaulting through computation to the CSS used value explains how a specification-defined starting value becomes a concrete rendering.

A CSS property is a defined parameter of presentation or layout, such as color, width or margin-left. Its definition specifies allowed values, an initial value, whether it inherits, and how values are computed. A CSS declaration proposes a value for a property on the elements matched by its rule.^[ref]

For example, width: 50% names the width property and supplies a percentage value. If that percentage resolves against a containing width of 400 CSS pixels, the resulting width is 200 CSS pixels in the simple case. The same declaration in a 600-pixel containing width can yield 300 pixels. A property name therefore identifies a parameter, while its eventual layout value can depend on context.

Different properties have different value grammars and defaulting behavior. A color word can be valid for color but invalid for width. Foreground color normally inherits, while width does not inherit by default. The absence of a width declaration is therefore different from automatically copying the parent's width.^[ref]

A property also differs from an HTML attribute with similar wording. Attribute interpretation is part of the element's document semantics; a CSS property participates in the styling value process, including the CSS cascade. Keeping the property definition, individual declarations and the resulting CSS used value separate makes styling behavior much easier to explain.

A CSS property value is a value considered or assigned for a CSS property. Its representation changes through value processing: declarations supply candidates, the CSS cascade chooses among applicable candidates, defaulting supplies missing values, and computation and layout resolve further details. The CSS computed value and CSS used value consequently describe different stages.^[ref]

Take width: 50%. In a simple block layout, its computed representation can retain a percentage, while the used width depends on the containing width. A 400-CSS pixel containing block gives 200 pixels; changing that block to 600 pixels gives 300. Copying the source string alone would miss why the physical layout changed.

Inheritance can resolve another value before that stage. If a parent's computed font size is 20px and its child specifies font-size: 150%, the child can compute to 30px. That child's descendant inheriting the font size receives the computed result, rather than repeatedly multiplying by the original percentage merely because it is further down the tree.^[ref]

Validity is property-specific. A syntactically readable width: blue is not a valid width value, and its failure does not establish a used width of blue or zero. Initial values, CSS inheritance and other applicable declarations determine the result under the relevant rules. Stating the value stage prevents a source token, a computed representation and a measured rendering from being conflated.

CSS specificity ranks selectors by their components when the CSS cascade reaches its specificity comparison. In the Selectors Level 4 by World Wide Web Consortium convention, the triple $(A,B,C)$ counts ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors respectively. The comparison uses lexicographic order: compare $A$ first, then $B$ if needed, then $C$.^[ref]

For example, p.warning has specificity $(0,1,1)$, .warning.urgent has $(0,2,0)$ and #notice has $(1,0,0)$. The ID selector outranks either class-based selector at this stage. The triple is not a base-ten number: sufficiently many classes do not carry into the ID component. A descendant CSS combinator such as the space in article p contributes no count of its own.

Some functional CSS pseudo-classes have explicit exceptions. :where(#notice) contributes zero specificity, while :is(.warning, #notice) takes the maximum specificity of its argument list, here $(1,0,0)$. This is not necessarily the specificity of whichever individual alternative happened to match.^[ref]

Specificity is not the whole priority system. Origin, importance and CSS cascade layers can decide before selector counts are compared; later source order can decide a remaining tie. Consequently, an author can override a highly specific normal declaration with a lower-specificity important declaration in the appropriate cascade context.^[ref]

A CSS used value is a value obtained after applying the calculations needed for layout. It can depend on geometry unavailable when the CSS computed value was established, such as the size of a CSS containing block or the sizes of related content.^[ref]

For example, an ordinary block whose computed width remains 50 percent can have a used content width of 200 CSS pixels in a 400-pixel containing block. Changing that containing block to 600 pixels yields 300 pixels, with the same computed percentage and with other constraints held fixed. The changed result follows from layout context rather than from a new source declaration.

A used width is also not necessarily the size of the whole outer box. With content-box sizing, padding, borders and margins are accounted for outside the content width. With box-sizing: border-box, the sizing edge is different. CSS minimum size and CSS maximum size constraints can alter the final result as well.^[ref]

Even after the used value has been determined, drawing on a particular device can require rounding or other permitted approximation. A fractional CSS length and a count of illuminated physical pixels are consequently different measurements. Stating the property, value stage, sizing edge and coordinate units makes a layout calculation reproducible.