Specified, computed, and actual values

CSS comments

Before we see a webpage, a user agent (i.e web browser, email client, web crawlers or spiders etc) parses the document and generates a document tree. And assigns a value to every property of every element of that document tree.

Now these values are assigned in three steps. Here is a list:

1.In the first step, a specified value is assigned. This value is determined through the specification, which is determined through a particular mechanism.

2. In the second step, the assigned value is resolved into a computed value.

3. In the thirst step, the computed value is transformed into an actual value.

Now we will discuss Assigned, Computed, and Actual value in detail.

specified value:

A specified value is determined by these three points in order:

1. Using the value if it is generated because of Cascading (process of importing styles to a CSS form a different CSS.)

2. Using the value of the parent element, if the value is inherited (process of receiving a value  by a child element from its parent element.)

3. Using the initial value of property (stated in the definition of the property).

Computed Value:

Now ,values assigned to the properties through specification may be an absolute value or may be a relative one. Absolute values are values those who don't depend upon any other values (e.g. font size is 10pt, the background color is grey etc.). These values don't need any transformation and can be resolved into a computed value which is assigned in the second step of the process.

Whereas, if the assigned value is a relative one, i.e. the value is dependant on any other value (e.g. 25% ), it has to be transformed to an absolute value by multiplying it with a reference value (or Unit).

Actual Value:

Theoretically, a computed value is ready to be used. But in practice, user agents may not be able to apply a computed value if it is not applicable to the medium it is to be presented. So it is resolved to an actual value after applying necessary approximations.

Previous: CSS values
Next: CSS Cascading