Terminology for CSS values
Published by marco on
The article ”Thousand” Values of CSS by Karl Dubost (Otsukare) clarifies the definitions for the various types of value in CSS. While there aren’t a thousand different kinds of value in CSS, there are quite a few. Each has its raison d’être.
The article is informative, but lists the values in what I consider to be an unintuitive order. I’ve changed the order and consolidated a bit. Each term links to the W3C documentation[1] and each definition starts with the official description, a layman’s translation, and a simple code example.
Click to jump to the definition or read them in order to learn how they build on each other.
- Initial value
- Declared value
- Cascaded value
- Specified value
- Computed value
- Used value
- Actual value
- Resolved value
- Initial value (W3C)
- “Each property has an initial value, defined in the property’s definition table. ”
I.e. the initial value could also be called the default value, as defined in the specification.
p { /* the initial value of
color
isblack
*/ } - Declared value (W3C)
- “Each property declaration applied to an element contributes a declared value for that property associated with the element.”
I.e. the declared value is the one that you’ve directly assigned to a property in a CSS element.
p { color: red; /* declared value is
red
*/ } - Cascaded value (W3C)
- “The cascaded value represents the result of the cascade: it is the declared value that wins the cascade (is sorted first in the output of the cascade). If the output of the cascade is an empty list, there is no cascaded value.”
I.e. the cascaded value is the declared value that sorts first in the list generated by the cascade of declared values that apply to that element.
p { color: red; /* declared value is
red
*/ } p { color: green; /* declared and cascaded value isgreen
*/ } - Specified value (W3C)
- “The specified value is the value of a given property that the style sheet authors intended for that element. It is the result of putting the cascaded value through the defaulting processes, guaranteeing that a specified value exists for every property on every element.”
I.e., the specified value is the cascaded value, or the default value for that property, if there are no cascaded values.
p { color: red; /* declared value is
red
*/ } p { color: green; /* declared, cascaded, and selected value isred
. */ /* Also, the selected value for, e.g.,margin-left
is0
because that's the default, and no value was specified. */ } - Computed value (W3C)
- “The computed value is the result of resolving the specified value as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for inheritance.”
I.e., the computed value is the specified value, but converted to absolute units (e.g.,
2em
converts to32px
if thefont-size
is16px
), or to a special value likeauto
.html { font-size: 16px; } p { font-size; 2em /* declared, cascaded, and selected value are
2em
, but computed value is32px
. */ /* computed value ofwidth
isauto
because there is no declared value, so the selected value is the initial value. */ } - Used value (W3C)
- “The used value is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document.”
I.e., the used value is the computed value, but special values are converted based on context. E.g., a computed value of
width: auto
will have a used value ofwidth: 100px
if the parent container is100px
wide.body { width: 100px; } p { width; auto /* declared, cascaded, selected, and computed value are
2em
, but used value is100px
. */ } - Actual value (W3C)
- “A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the
font-size-adjust
property. The actual value is the used value after any such adjustments have been made.”I.e., the actual value is the used value, but adjusted as necessary for the output device.
p { border-width: 1.1px; /* declared, cascaded, selected, computed, and used value are
1.1px
, but actual value is1px
. */ } - Resolved value (W3C)
Despited the name, the value returned by the
getComputedStyle()
method will be either the computed or the used value, depending on the type of property. The result of this method is called the resolved value.body { width: 100px; } p { width; auto }
const p = document.querySelector('p')[0]; const resolvedValue = window.getComputedStyle(p).width; /* resolvedValue == 100px */