Head First HTML with CSS

adding style to a div
Adding a border
Okay, now that you have a around all the elements in the elixirs
section, the fun begins: you can style it.
The first thing we want to reproduce in the elixirs handout is a border that
wraps around all the elements in the elixirs section, right? Well, now that
you actually have a element that wraps around the elixirs section,
you can style it and add a border. Let’s try that now.
You’ll need a new rule in the lounge’s CSS to select the element
using its id. Open up your “lounge.css” file in the “chapter11/lounge”
folder, and add this rule at the end:
#elixirs {
border-width: thin;
border-style: solid;
border-color: #007e7e;
}
An over-the-border test drive
After you’ve added the CSS, save it and then reload
your “lounge.html” file.
440 Chapter 11
Here’s the border that you just added
to the elixirs element.
You added a visible border
to this , but it still has
no padding and no margin.
We’ll need to add that too.
Notice that the border goes
around all the elements inside
the element. The
is a box like every other
element, so, when you add
a border, the border goes
around the content, which is
all the elements in the .
Add this at the end of your CSS file. It
selects the elixirs element using its id,
and adds a thin, solid border in our favorite
aquamarine color.