Mainpage
Those three examples all use different units. There are many ways in CSS to give sizes, the most used ones are: px (fixed size in pixels), % (percentage relative to the parent element) and em (relative size, 1em being the font size of the parent element).
Parent element means the container that holds the element we are referring to. Like so:
The green Corolla is roughly as large as the black text above. Why? Because the body says the
font should be 15 pixels tall, that's the text 'This is a nice car', then we enter the div called
car, there the text is supposed to be 30 pixels tall, and then we enter a div that is inside
of the div.car. And the rule says for this div (div.model) 60%. 60% of what? Of the parent (containing) element,
which is div.car. So the size for the word 'Corolla' gets calculated by taking the font-size of the div.car (30 pixel)
and taking 60% out of that, which equals 18 pixels, and that is how tall the word 'Corolla' appears. If you change the rule for
.car to, say, 12 pixel, then 'Corolla' will be written rather small, since then it will be 60% out of 12 pixel, that's (rounded)
7 pixel. The other unit mentioned above (em) means the font-size itself of the parent font.
You could say 1em is 100%, 2em is 200%, and you can even use 1.5em (150%) or 1.75em (175%).
Since many browsers can scale text by user preference (someone with a tiny monitor or bad eyes might want the text a lot larger)
it is recommended to use relative sizes.
Try it out, click on the links below. That will change the size of the blue 'Toyota' and you will see how the green 'Corolla' will
change accordingly.
10px, 20px, 30px, 40px,
