= CSS property value
{c}
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.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Value Processing, declared, cascaded, specified, computed, used and actual values]{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.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Computed Values and Inheritance: inherited values are generally computed values]{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.
Back to article page
