Though I am not having any sort of problem with font-size, I was curious as to how the sizing works. I know that there are several different types of fun-sizes including px, em, rem, etc. What is the difference between px and em, and what is the difference between em and rem. I am also curious as to how the percentage sign works exactly. I have used the percentage sign a lot, but never understood how the measurement worked for it. Does it mean when you write 50% that it will go 50% across the screen or 50% across the constraints of that border, or just make the background-color fill up 50% of those letters. Out of all of the measurements that I know then the percentage sign is the most confusing. Also I was wondering what other forms of measurement there were. Thanks a lot for the help
From what I roughly understand (and please feel free to correct me, since I am just trying to revise what I had learned long ago):
1em implies that the font-size of the current element would be 1 times the size of its parent element. The font-size of root element body is 16px. So, this arrangement:
<body> <h1> Heading <p>Bigger text!</p> </h1> </body>
p both have
font-size: 1.5em, h1 will get
font-size equal to 1.5*16(font-size of parent-body)=24px and p will get size equal to 1.5*24(font-size of parent-h1)= 36px. You can see this in action right here and on jsfiddle:
rem is similar to
em except computation is done based directly on root element (body).
There are other units like
vw which are viewport heights and widths - useful if you are designing responsive sites for multiple viewport (device screen) sizes.
And I never really understood how
% works in font-sizes
Hopefully I got the rest of them right though
Thanks a lot you did just that. I always wondered the difference between em and rem. I was guessing that an em would be about 15px, but I never knew the exact size. This ought to work great! I just hope that somebody on codecademy knows how the % sign works though; I have a head ache just thinking about it.