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;
Search WWH ::

Custom Search