This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS: An Overview Forum

View Course » View Exercise

427 points
46f7d31e678164d74a4827a48a95e8bb?s=140&d=retro
Submitted by
Rachel
almost 4 years ago

Trying to understand Em, very confused.

So I kind of understand Em, but still very confused. How would you apply Em to your whole page? I see you use it for the So then would that change it for all the paragraphs?
&also would i have to repeat this for h1 headers etc?


0 votes

permalink

I believe a size of 1em would be equivalent to the default font size for your browser automatically. So if you applied a style rule using the body selector and set it with a font-size of 2em all the text that was inside of the body element would be twice the normal size of the default font size in the browser for the text. If you then had applied a style rule to the h1 selector that fell within the body to 2em it would always be twice the size of the other text inside the body element, because you are telling it to double whatever the current size is in the document. Then if you set all p elements to 1em they would always be the same size of the body text, because you are telling it to have the same size as whatever the current size is in the document. Hopefully this describes how the scaling works without being too confusing.
If you did this in your stylesheet, you would not have to repeat for each h1 header, you would just apply a style rule that applied to all h1 headers in the htm file. Example of what that would look like in css below:

body {
font-size: 2em;
}    
h1 {
font-size: 2em;
}

1755 points
35dcb0de5d4fdc2b2fa1f68ddfc955ad?s=140&d=retro
Submitted by
Michael
almost 4 years ago

2 Comments

46f7d31e678164d74a4827a48a95e8bb?s=140&d=retro Rachel almost 4 years ago

Hmmm I understand kind of the scale thing, but how do i know if i put 0.5em, 1em, or 2em :S

35dcb0de5d4fdc2b2fa1f68ddfc955ad?s=140&d=retro Michael almost 4 years ago

Think of it like percentages, if you want something half the size (50%)of the current level you would use 0.5em. If you want something to stay the same size (100%) you would use 1em, twice the size (200%) you would use 2em, one tenth the size (10%) you would use 0.1em. 17.75 times the size you would use 17.75em etc. You just have to keep in mind what the current level will be based on the current hierarchy of the html file. The best way to learn this is to just gradually add random sizes to your html file one and a time and see what happens.