HTML and CSS Reference
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.