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
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
You need to sign up for Treehouse in order to download course files.
Sign up