Head First HTML with CSS

Adding some real style to
the elixirs section
So far, so good. We’ve found a way to get
that border around the entire section. Now
you’re going to see how to use the to
customize the styling of the entire elixirs section
independent of the rest of the page.
We obviously have some padding issues to deal
with, because the border is right up against the
content. But there’s a lot of other style we need
to work out, too. Let’s take a look at everything
we need to take care of...
The main heading
and the paragraph
text are black, while
the drink names are
a red color that
matches the red in
the logo.
The text and images
are centered, and
there’s padding on
the sides to add
space between the
text and the border.
The line-height of the
paragraphs looks a lot more
like the default line height for
the page (before we changed it
in the last chapter).
The font family is a sans-serif font, just
like the body font, so we don’t have to
change that. Remember that the
element and all the elements nested in it
inherit the font family from the body.
This link is aquamarine.
There’s a background
image at the top.
divs and spans
The width of the elixirs
handout is narrower than the
rest of the page.
you are here 441