CSS Values and Units

Basic

CSS values are typed inputs

CSS properties do not accept arbitrary text. Each property has a value definition that describes the kinds of values it accepts. CSS Values and Units provides common value types and the grammar used by many other CSS modules.

?

Numbers, dimensions, and percentages

A number has no unit, while a dimension combines a number with a unit such as `px`, `rem`, or `s`. A percentage is its own value type whose interpretation depends on the property using it. Do not assume every percentage is relative to the same thing.

?

Absolute and font-relative lengths

CSS defines multiple length units. Absolute-length units include `px`, while font-relative units such as `em` and `rem` depend on font-size context. The unit belongs to the value model; individual layout lessons should explain only the units necessary for their own algorithms.

?

Viewport and container-related units

Viewport units express lengths relative to viewport dimensions. Container query length units can express lengths relative to a query container. These units belong to Values and Units as value mechanisms; the Responsive Design and Container Queries lessons own when and why the corresponding evaluation contexts are used.

?

CSS-wide keywords

CSS-wide keywords such as `initial`, `inherit`, `unset`, and `revert` are available across CSS properties. They are not ordinary property-specific values: they express general instructions about how a property gets its value.

?

Math functions and composition

Functions such as `calc()`, `min()`, `max()`, and `clamp()` let compatible values be composed rather than forcing authors to choose one fixed measurement. The exact permitted combinations come from the value grammar and the property using the result.

?

Developing Values 5: tree-counting functions

The current CSS Values and Units Level 5 draft adds `sibling-index()` and `sibling-count()`. Both return integer values: `sibling-index()` is the 1-indexed position of the element among its inclusive siblings, while `sibling-count()` is the total number of child elements in its parent. They can feed other CSS value computations.

Keep these functions in the developing section rather than presenting them as stable fundamentals. Values and Units Level 5 explicitly describes itself as an early exploration phase with major breaking changes expected.

?

?

Specified, computed, used, and actual values

CSS Values and Units describes stages through which values can be resolved. The cascade produces specified values; computation resolves dependencies and normalizes values; layout and other algorithms can then determine used values, with the actual value reflecting implementation and environment constraints. Individual property specifications determine the details for their properties.

?

Invalid values and fallback

A value can be invalid for a property even when its tokens are syntactically valid CSS. The property’s value definition determines whether the value is accepted. Fallback mechanisms such as multiple declarations are authoring strategies; parser recovery is owned by CSS Syntax, not Values and Units.

?