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>.
Search WWH ::

Custom Search