HTML and CSS Reference
In-Depth Information
Adding a border
Now that you have a
<div>
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
<div>
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
<div>
element
using its id. Open up your “lounge.css” file in the “chapter10/lounge”
folder, and add this rule at the end:
Ad
d this
at t
he end
of yo
ur CS
S file
. It
se
lects t
he eli
xirs <d
iv> e
lement
using
its id
,
#elixirs {
border-width: thin;
border-style: solid;
border-color: #007e7e;
}
an
d add
s a th
in, sol
id bor
der in
our f
avorit
e
aq
uamar
ine co
lor.
An over-the-border test drive
After you've added the CSS, save it and then reload
your “lounge.html” file.
Here's the bor
der that you just added
to the elixirs <
div> element.
Yo
u add
ed a
visi
ble b
orde
r
to
this
<div
>, bu
t it
still
has
no
pad
ding
and
no m
argin
.
We
'll ne
ed t
o ad
d th
at to
o.
Notice that the border goes
around all the elements inside
the <div> element. The <div>
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 <div>.
