HTML and CSS Reference
In-Depth Information
Adding some real style to
the elixirs section
The width of the elixirs
handout is narrower than the
rest of the page.
There's
a background
image a
t the top.
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
<div>
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 text and
images
are centered,
and
there's paddin
g on
the sides to a
dd
space between
the
text and the
border.
The fo
nt family is a sans-serif fo
nt, just
like th
e body font, so we don't ha
ve to
change
that. Remember that the
<div>
elemen
t and all the elements neste
d in it
inherit
the font family from the
body.
This
link is aquamarine.