This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Relative length units are relative to other length values. The most commonly used relative unit is the em unit. The em is known as a font-relative unit because it's calculated based on a parent element's font size.
Using em units
If we set our body's font-size value to 1em:
body {
font-size: 1em;
}
This is equivalent to setting the font-size value to:
body {
font-size: 16px;
}
Converting pixels to ems
To convert a px value to its equivalent em value, we can follow a simple formula: divide an element’s px value by the parent element's font-size value.
For example:
.intro {
font-size: 24px;
}
To convert the font-size value of intro to an em value, we'll need to divide 24 by the parent element's font-size. In this case, the parent element is the body element, which has the font-size set to 1em, or 16px.
24/16 = 1.5
This gives us an em-based font-size value of:
.intro {
font-size: 1.5em; /* 24px/16px */
}
Tools
In CSS, relative length units are relative
to other length values.
0:00
And the most commonly used relative unit,
is the em unit.
0:04
The em is what's called a font relative
unit,
0:08
because it's calculated based on a parent
elements font size.
0:11
So, anytime we give an element's property,
a value of one em,
0:15
that 1em is equal to the font size value,
of the parent element.
0:20
So, for example, the default font size for
most browsers, is 16 pixels.
0:25
So, if we set our page's body font size
value to 1em,
0:31
this is the equivalent to setting the font
size value to 16 pixels.
0:37
So here, by default, 1em is equal to 16
pixels,
0:43
2ems would then be equal to 32 pixels and
so forth.
0:48
So now, if we wanted to find the font size
of our header title in ems, let's
0:53
scroll down to our header rule, and let's
change the 26 pixel value to, say, 3em.
0:58
So, with this 3em value, the title element
is still inheriting that
1:07
font-size value from the body element, and
it's multiplying it by three.
1:12
So, if we save our stylesheet and
1:16
take a look at it in the browser, now the
title looks really big,
1:19
because the value 3em is making it three
times that body font size context.
1:24
So, now it's equivalent to 48 pixels.
1:30
And if we go back to our stylesheet, and
1:34
change the body font size to a larger
value, let's say 2em.
1:37
When we save our stylesheet and take a
look at it again, now the title gets
1:43
even bigger, because its em value scales
to that larger body font size context.
1:48
Now if you go back and make the body font
size smaller, let's say .5em,
1:54
and we save and refresh the browser the
titles font size value is now relative
2:00
to that smaller font size of the body, so
the title now looks a lot smaller.
2:07
But, let's go ahead and keep the body
context at one m, moving forward.
2:13
So I'll just change the font size value
back to, 1em in the body rule.
2:18
So, if we save our stylesheet and take a
look at our header element, again.
2:23
So, our title's font size is still too
big.
2:27
We'll need to define a smaller em value,
2:31
that's equivalent to the title's original
font size, of 26 pixels.
2:34
So, how do we do that?
2:41
Well, to convert a pixel value,
2:42
to its equivalent em value we can follow a
simple formula.
2:45
We'll need to divide the desired elements'
pixel value,
2:49
by the parent element's font size in
pixels, which again, in our case,
2:54
is the body font size, equivalent to 16
pixels.
2:59
[BLANK_AUDIO]
3:03
So, 26 divided by 16, gives us a value of
1.625.
3:06
So, next to our font size declaration,
let's add a comment
3:13
to remind us the equation we used, and
what this value means in pixel units.
3:19
So we're gonna write 26 pixels, divided by
16 pixels.
3:24
Now, we're gonna change the font size
value to 1.625 em.
3:30
So, now when we save our stylesheet and
take a look at our preview,
3:37
once again, we can see that the title is
now exactly the size we need it to be.
3:41
So, now that we know how to convert pixel
values to em's.
3:47
Let's also define our h1's font size, as
an em-based value.
3:51
Now currently, it's set to 90 pixels, so
3:58
let's once again add a comment next to the
font size declaration,
4:01
that says 90 pixels divided by 16 pixels.
4:07
And this gives us an em-based value of
5.625em.
4:13
So now we know that the em is a useful
unit for creating scalable content.
4:21
Because it can adapt to other font sizes.
4:28
This way, child elements are able to
resize proportionally based on parent's
4:31
font size, without us having to manually
calculate and redefine all the different
4:36
font sizes for child elements, like we
would have to do with pixels.
4:40
Now an important thing we need to keep in
mind when font sizing with em units,
4:44
is that there is a compounding effect that
happens in nested elements, so
4:48
let's go over an example of that.
4:53
So, if we go back to our stylesheet, and
give the main header element,
4:55
a font size, so let's add a font size
property and set the value to 2em.
5:02
Now the main header font size of 2em,
becomes the new context for
5:12
our title and heading font sizes, since as
we can see here in the HTML.
5:18
The main header is their parent element.
5:24
So, the title and the h1's font size, is
now relative to this font size of 2em.
5:27
So now, when we save our stylesheet, and
refresh the browser,
5:34
notice how the font size scales up, based
on that new context of 2em.
5:39
This is the compounding effect I mentioned
earlier.
5:44
So, let's stop and take a look at what is
happening here.
5:47
So, the 2em font size value, we applied to
the main header is equal to 32 pixels,
5:51
because it's 2 times that base font size
equal to 16 pixels, up here in the body.
5:58
So this means that now our title font size
is 1.6 times larger than 32 pixels.
6:06
So, it's now equivalent to 52 pixels.
6:14
And the h1 is now 5.625 times larger.
6:17
That's why it looks really big at about
180 pixels.
6:23
So these are the type of issues we need to
be careful with
6:27
when working with relative em units.
6:30
This compounding effect can get pretty
troublesome depending on how many
6:32
font sizes we've defined in our
stylesheet.
6:36
We don't want to get into a predicament
where a deeply nested em based font size,
6:39
is compounded all the way down from the
root element of the document.
6:43
And we'll learn how to get around this
compounding problem, next
6:47
You need to sign up for Treehouse in order to download course files.
Sign up