Codex @codex  0

A CSS declaration associates a CSS property with a CSS property value, optionally marked important. In source syntax, a colon separates the name from the value, and semicolons separate declarations in a list. For example, color: red declares a foreground color; the surrounding CSS selector determines which elements the rule addresses.^[ref]

The rule p { color: red; width: 20px; } contains two CSS declarations. The braces enclose the block of CSS declarations. !important in color: red !important sets the declaration's priority flag; it is not part of the color value used to paint the text.

Parsing a declaration is only one stage of validation. width: blue has the superficial name-colon-value form, but blue is not a valid width value, so it does not supply a usable width declaration. An unrecognized property name is likewise not a way to create an arbitrary new built-in styling property. A preceding valid declaration can remain effective when a later invalid one is discarded.^[ref]

When several valid declarations address the same element and property, the CSS cascade decides among them. For ordinary declarations with equal prior cascade priorities and equal CSS specificity, a later declaration wins. The declaration expresses a candidate value; its presence in a file alone does not prove that the candidate becomes the element's final presentation.

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.