Head First HTML with CSS

Let’s look at how this all works. First, you set a size for your
element. Then, you set all the other font sizes relative to
that size, like this:
body { font-size: small; }
h1 { font-size: 150%; }
h2 { font-size: 120%; }
That gives you a document tree that looks like this:
The font size of
is 150% the font size
of .
body is small
h1 is 150% of body p is small h2 is 120% of body
The doesn’t have a font-size value set, so
by default, it inherits the font size.
Now, let’s say you decide to make your
font size bigger, OR the user makes the
font size bigger using the browser.
All your other elements
automatically get bigger too,
without you having to do a thing.
body is large
We’ve set ’s
font size to 120%
of its parent’s size.
Now, let’s say you want to increase the size of the fonts on the page,
or perhaps the user does. Then you get a tree that looks like this:
h2 is still 120% the size of
the body font size. In this
case it’s 120% of “large”.
h1 is 150% of body p is large h2 is 120% of body
Now the body font size has changed to large, and everything else has
changed too, in relation to the body font size. That’s great, because
you didn’t have to go through and change all your other font sizes;
all you had to do was change the body font size. And if you’re a user,
everything happened behind the scenes. When you increased the text
size, all the text got bigger because all the elements are sized relative to
one another, so the page still looks good at a larger font size.
styling with fonts and colors
Internet Explorer
does NOT
support text
scaling when the font size
is specified using pixels.
Watch it!
Unfortunately, Internet Explorer
users cannot resize fonts if your
font sizes are specified using
pixels. So, that’s one reason to
stay away from pixel sizes. If you
use pixels, you’ll be reducing the
accessibility of your pages for
many of your users.
Fortunately, if you follow the
recipe of supplying a keyword to
define your body’s font size, and
use relative sizes for your other
elements using em or %, then IE
will properly scale your fonts if the
browser is asked to make the text
bigger or smaller.
you are here 355