So because of the 2em in .main-header, which effects h1, h1 is now 180 pixels or 180px/32px?

Hi Nathaniel,

I do not quite understand the question that you posed but I will do my best to answer. I am new to this forum but have gone through several tracks, especially CSS, and believe I am qualified to answer your question. To answer your question I will quote the Mozilla Developer Network (MDN) that has a vast amount of CSS resources at your disposal. You can find more information by visiting https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

According to MDN

"Ems

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

One important fact to keep in mind: em values compound. Take the following HTML and apply it with the previous CSS above:

<div> <span>Outer <span>inner</span> outer</span> </div> The result is:

OPEN IN CODEPEN OPEN IN JSFIDDLE

Assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner span's font-size is 1.6 em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. This is often called compounding."

I believe this is great explanation when it comes to font-size. If em is used in any other way other than font-size you would have to look that up. But I believe that the above answers your question about font-size.

Hopefully this helps.

JK

Hi nataniel,

I now understand your question. You will learn later in the course the concept of "specificity". I had the same problem understanding this when I went through the course. But understand this logic.

To convert a pixel value to its equivalent em value we can follow a simple formula

   em =  (desired element's pixel value)/(parent element's font size in pixels)

Now I understand that this does not answer your question right away but follow along with me. According to this equation we must find the parent element's font size in pixels. The parent element's font size by default for the BODY type selector is 16px. This default is the parent element throughout the body section of the page UNLESS we SPECIFY it to be other. When we change the .main-header of the CSS it is specific to only the main header and not the entire body. So that means that whatever we put in as the body would be the parent element based on the specificity principle that you will study later in the course.

As shown from 3:51 and on in the video you will see why the calculation of 90px/16px is necessary to get 5.625em. When the refreshed browser button is hit you will notice that the font-size is 5.625 times larger than the body text that does not have a specific font-size declaration in the html or a specific declaration in the CSS.

CSS inheritance rules also apply.