Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
So because of the 2em in .main-header, which effects h1, h1 is now 180 pixels or 180px/32px?
Just clarifying because the h1 is affected by the parent element's class
John Kumar13,937 Points
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
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.
I understand that conceptually, what I'm asking is about the specific code. The video on em units, if you look at the css code. The h1 has a font size set to 5.625em in the css code. I know based on compounding that the h1 will appear larger because h1 is nested within the header element in the html. But I don't understand why the h1 is set to 5.625em in the exercise.... did we just want it to be 90px arbitrarily and converted it to 5.625em? So my question was that when we changed the .main-header in the css to have a 2em font-size, does that mean that the h1, while still 5.625em, now displays a 180px size text?
John Kumar13,937 Points
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.
John Kumar13,937 Points
In another words, the body CSS instructions are the parent elemet's font size in pixels.
based on CSS video on em units