In CSS specifications and on the property pages here on MDN you will be able to spot value types as
they will be surrounded by angle brackets, such as color
or length
. When
you see the value type color
as valid for a particular property, that means you can use
any valid color as a value for that property, as listed on the color
reference page.
In the following example, we have set the color of our heading using a keyword, and the background
using the rgb()
function:
h1 {
color: black;
background-color: rgb(197,93,161);
}
The numeric type you will come across most frequently is <length>
. For example
10px
(pixels) or 30em
. There are two types of lengths used in CSS —
relative and absolute. It's important to know the difference in order to understand how big things
will become.
Absolute length units are not relative to anything else, and are generally considered to
always be the same size.
Most of these units are more useful when used for print, rather than screen output. For example, we
don't typically use cm
(centimeters) on screen. The only value that you will commonly
use is px
(pixels).
Relative length units are relative to something else, perhaps the size of the parent
element's font, or the size of the viewport. The benefit of using relative units is that with some
careful planning you can make it so the size of text or other element scales relative to everything
else on the page.
em
and rem
are the two relative lengths you are likely to encounter most
frequently when sizing anything from boxes to text. It's worth understanding how these work, and the
differences between them, especially when you start getting on to more complex subjects like styling
text or CSS layout. The below example provides a demonstration.
To start with, we set 16px as the font size on the <html>
element.
To recap, the em unit means "my parent element's font-size" in the case of typography. The
<li>
elements inside the <ul>
with a class
of
ems
take their sizing from their parent. So each successive level of nesting gets
progressively larger, as each has its font size set to 1.3em
— 1.3 times its parent's
font size.
To recap, the rem unit means "The root element's font-size". (rem stands for "root em".) The
<li>
elements inside the <ul>
with a class
of
rems
take their sizing from the root element (<html>
). This means that
each successive level of nesting does not keep getting larger.
However, if you change the <html>
font-size
in the CSS you will see
that everything else changes relative to it — both rem
- and em
-sized text.