When a document has been parsed and constructed, a browser must assign a value to every property and for every element that applies to the given media type.

A property's value goes through four steps of evaluation (calculation) before it becomes an "actual value". These steps are explained below:

Specified values

A browser first assigns a specified value to each property. The specified value is determined in this order:

  1. If there is a value coming from the cascade, browser will use it.
  2. If the property is inherited and the element is not the root of the document tree, it will use the computed value of the parent element.
  3. In any other case use the initial value of the property (given by the CSS 2 specification).

Computed values

An above specified value gets resolved to a computed one during the cascade (the units, such as "em" or "ex" get computed to pixels or absolute lengths, URIs are made absolute, etc...). The computed value of a property is defined as specified by the "computed value" line in the CSS 2 specification.

Used values

Some values can not get computed before the document is being laid out. The most often example is an element's width that is set as a percentage of its containing block. Such a value cannot be determined until the width of the containing block has been defined. A used value is a result of taking the computed value and resolving any remaining dependencies into an absolute value.

Actual values

If the used value cannot be rendered in the given environment for any reason, a browser might modify the used value, and re-calculate it as an actual value.

 

›› go to examples ››