The only absolute-keyword value we'll set in the entire style sheet is the base on the
<body>
element, as we've been discussing throughout the chapter:
body {
font-size: small;
}
You'll notice that it's a close match (Figure 1.5). This will obviously vary slightly from browser to browser, and depends on how that software chose to render each keyword. But in general, using
small
as a base size is a bit like setting text at
12px
(provided the
user
hasn't changed settings). Sometimes this helps designers get a handle on where to begin with keyword values.
USE PERCENTAGES TO STRAY FROM THE BASE
From this base of
small
, we'll use percentages to modify the size in either direction. Using a percentage is a simple way of visualizing what size type you'd like a certain element to be. Figure 1.6 illustrates how a percentage could increase or decrease the font size from a base keyword.
For instance, if we wanted all
<h1>
elements to be quite a bit larger than the default size of
small
, we'd simply declare it:
body {
font-size: small;
}
h1 {
font-size: 150%;
}
Since
<h1>
elements are always contained
within
the
<body>
element, we can be sure that the size will be 150% of
small
(Figure 1.7).
Similarly, you may also want to make certain paragraphs of text
smaller
than the default, in this case, smaller than
small
. In Figure 1.8, I've created a
note
class and attached it to a short paragraph.
[View full width]
[View full width]
<p
class=
"
note
">This is the "note" class that I'd like to appear slightly smaller than
default text.</p>
I intend to set this paragraph slightly smaller in size to the default, so I'll add a declaration that uses a percentage below 100 to bring it down.
.note {
font-size:
85%
;
}
You can begin to see that we could assign percentages for any element we'd like throughout the page, whether it be smaller or larger than the base we've set for the
<body>
.
For example, a simplified style sheet where certain elements are sized with percentages might look something like this:
body {
font-size: small;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 120%;
}
ul li {
font-size: 90%;
}
.note {
font-size: 85%;
}
We have declared descending values for three levels of headings, made unordered list items slightly smaller, and included a
note
class that we could assign to any element we'd like to be smaller than the default. This is a rudimentary example but should
illustrate
the two-step concept:
set a base keyword
, and then
use a percentage to increase or decrease other elements
. Change your base, and the rest will follow.
A nice advantage to using the base-plus-percentage model is that, should you decide to change the default, you need only change the single declaration on the
<body>
element. Everything else that's been assigned a percentage is working off that top-level element's size, so changing from
small
to
large
will, in
turn
, affect other elements proportionally. That can
certainly
come in handy, even if you decide at some point that you'd rather specify a base size using an alternate unit.
For that same reason, it makes it easier for those users who like to create their own user style sheets that override the site's defaults. A single rule that modifies your base size will in turn affect the entire page, proportionally.
