Terminology for CSS values

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 is black */
}

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 is green */
}

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 is red. */

  /* Also, the selected value for, e.g., margin-left is 0
     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 to 32px if the font-size is 16px), or to a special value like auto.

html {
  font-size: 16px;
}

p {
  font-size; 2em 

  /* declared, cascaded, and selected value are 2em,
     but computed value is 32px. */

  /* computed value of width is auto 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 of width: 100px if the parent container is 100px wide.

body {
  width: 100px;
}

p {
  width; auto 

  /* declared, cascaded, selected, and computed value are 2em,
     but used value is 100px. */
}

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 is 1px. */
}

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 */