HTML and CSS Reference
In-Depth Information
A very quick test drive
Let's do a quick test drive just to see how these
styles affect the page. Make sure you've made all the
changes; then save and test.
Headings a
re now sans
-serif
and a colo
r that mat
ches
the logo,
creating a t
heme
for the p
age.
Parag
raph text is also sans-s
erif
since
every element inherits t
he
<body
>'s font-family propert
y.
This
link looks
oddly out
of place
with
its defau
lt blue co
lor. We'll
have
to fix th
at (later
).
We haven't applied any
styles
to the <h3>, so it just
inherits
the font-family proper
ty
from <body>.
One more adjustment
We're going to make one more adjustment to the
lounge before we move on to start making some bigger
changes. This adjustment involves a new property you
haven't seen before, but at this point, you've got enough
experience under your belt that we're not going to treat
you with kid gloves every time a new property comes
along. So, just jump in and give it a try.
Increasing th
e line height of your text
can improve r
eadability. It also gives
you another w
ay to provide contrast
between diff
erent parts of your page
(you'll see how
that works in a bit).
Here's what we're going to do: we're going to adjust the
line height of the text on the entire page so that there's
more vertical space between each line. To do that, we
add a
line-height
property in the
body
rule:
Here we're changing the space between each line to 1.6em—
in other words, 1.6 times the font size.
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}
