HTML and CSS Reference
In-Depth Information
Let's look at how this all works. First, you set a size for your
<body>
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:
W
e've s
et <
h2>'
s
fo
nt s
ize t
o 12
0%
of
its
pare
nt's
size.
body is small
h1 is 150% of body
p is small
h2 is 120% of body
The <p> doesn't have a font-size value set, so
by default, it inherits the <body> font 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:
Now let's say yo
u decide to make
your
font size bigger
, OR the user ma
kes the
font size bigger
using the browse
r.
h2
is st
ill 12
0%
the s
ize o
f
body is large
the
bod
y fon
t siz
e. In
this
cas
e, it'
s 120
% o
f “la
rge.”
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.
