In CSS, relative length units are relative to other length values.

And the most commonly used relative unit, is the em unit.

The em is what's called a font relative unit,

because it's calculated based on a parent elements font size.

So, anytime we give an element's property, a value of one em,

that 1em is equal to the font size value, of the parent element.

So, for example, the default font size for most browsers, is 16 pixels.

So, if we set our page's body font size value to 1em,

this is the equivalent to setting the font size value to 16 pixels.

So here, by default, 1em is equal to 16 pixels,

2ems would then be equal to 32 pixels and so forth.

So now, if we wanted to find the font size of our header title in ems, let's

scroll down to our header rule, and let's change the 26 pixel value to, say, 3em.

So, with this 3em value, the title element is still inheriting that

font-size value from the body element, and it's multiplying it by three.

So, if we save our stylesheet and

take a look at it in the browser, now the title looks really big,

because the value 3em is making it three times that body font size context.

So, now it's equivalent to 48 pixels.

And if we go back to our stylesheet, and

change the body font size to a larger value, let's say 2em.

When we save our stylesheet and take a look at it again, now the title gets

even bigger, because its em value scales to that larger body font size context.

Now if you go back and make the body font size smaller, let's say .5em,

and we save and refresh the browser the titles font size value is now relative

to that smaller font size of the body, so the title now looks a lot smaller.

But, let's go ahead and keep the body context at one m, moving forward.

So I'll just change the font size value back to, 1em in the body rule.

So, if we save our stylesheet and take a look at our header element, again.

So, our title's font size is still too big.

We'll need to define a smaller em value,

that's equivalent to the title's original font size, of 26 pixels.

So, how do we do that?

Well, to convert a pixel value,

to its equivalent em value we can follow a simple formula.

We'll need to divide the desired elements' pixel value,

by the parent element's font size in pixels, which again, in our case,

is the body font size, equivalent to 16 pixels.

[BLANK_AUDIO]

So, 26 divided by 16, gives us a value of 1.625.

So, next to our font size declaration, let's add a comment

to remind us the equation we used, and what this value means in pixel units.

So we're gonna write 26 pixels, divided by 16 pixels.

Now, we're gonna change the font size value to 1.625 em.

So, now when we save our stylesheet and take a look at our preview,

once again, we can see that the title is now exactly the size we need it to be.

So, now that we know how to convert pixel values to em's.

Let's also define our h1's font size, as an em-based value.

Now currently, it's set to 90 pixels, so

let's once again add a comment next to the font size declaration,

that says 90 pixels divided by 16 pixels.

And this gives us an em-based value of 5.625em.

So now we know that the em is a useful unit for creating scalable content.

Because it can adapt to other font sizes.

This way, child elements are able to resize proportionally based on parent's

font size, without us having to manually calculate and redefine all the different

font sizes for child elements, like we would have to do with pixels.

Now an important thing we need to keep in mind when font sizing with em units,

is that there is a compounding effect that happens in nested elements, so

let's go over an example of that.

So, if we go back to our stylesheet, and give the main header element,

a font size, so let's add a font size property and set the value to 2em.

Now the main header font size of 2em, becomes the new context for

our title and heading font sizes, since as we can see here in the HTML.

The main header is their parent element.

So, the title and the h1's font size, is now relative to this font size of 2em.

So now, when we save our stylesheet, and refresh the browser,

notice how the font size scales up, based on that new context of 2em.

This is the compounding effect I mentioned earlier.

So, let's stop and take a look at what is happening here.

So, the 2em font size value, we applied to the main header is equal to 32 pixels,

because it's 2 times that base font size equal to 16 pixels, up here in the body.

So this means that now our title font size is 1.6 times larger than 32 pixels.

So, it's now equivalent to 52 pixels.

And the h1 is now 5.625 times larger.

That's why it looks really big at about 180 pixels.

So these are the type of issues we need to be careful with

when working with relative em units.

This compounding effect can get pretty troublesome depending on how many

font sizes we've defined in our stylesheet.

We don't want to get into a predicament where a deeply nested em based font size,

is compounded all the way down from the root element of the document.

And we'll learn how to get around this compounding problem, next