The Different Names for Values in CSS

CSS:

body {
  font-size: 1.2rem;
}Code language: CSS (css)

What is the value of font-size on the body? 1.2rem… right!? Kinda!

That’s the “specified” value, and it’s just one of many kinds of values that we might talk about when working with CSS, the DOM, and rendering our site in a web browser. Karl Dubost got all into this recently in a post called “Thousand” Values of CSS.

You likely know that the browser itself doesn’t really think of 1.2rem as the font-size it is rendering with. We can see that in the computed tab in DevTools, which will list the font-size as something like 18.072px. That’s because rem is a relative unit and now the browser has done all the computation needed to figure out what it should be, so that’s the “computed” value. Karl notes there might be an “actual” value too, in case the browser does things behind the scenes to that computed value (like be forced to round it). If a value isn’t relative in any way (like green), you can call that an “absolute” value.

A computed value also might end up being something like auto or 2fr or something, so the “used” value also comes after computed and is what the browser actually makes something, even if it won’t actually tell you that unless you measure it. If you measure specifically with getComputedStyle(), you’d think that would return the computed value (because of the name), but “it depends”, and is safer to refer to as the “resolved” value which is either the computed value or the used value.

An element might have values that apply to it just by virtue of existing, which are referred to as the “initial” value. Kinda like how color is black until it is changed or other preferences kick in. An element might also have several values trying to apply to it, but only one wins, which you then refer to as the “cascaded” value.

This all sounds super complicated when you have to have names for them and write it all down, but I think in practice it’s pretty intuitive. I’m not sure I’ve used these terms perfectly despite writing about CSS for a hot while (but we all should).