HTML and CSS Reference
In-Depth Information
Creating the guarantee style
Let's get started by making a few small changes to the style of the guarantee
paragraph just to get a feel for how the paragraph's box is set up. To do that,
you're going to add the paragraph to a class called
guarantee
so that you can
create some custom styles for just this paragraph. You're then going to add a
border along with a little background color, which will let you see exactly how
the paragraph is a box. Then we'll get to work on the rest of the style. Here's
what you need to do:
Open your “lounge.html” file and locate the paragraph that starts
“Our guarantee”. Add a class attribute “guarantee” to the element like this:
1
Add
the class att
ribute with
a value of “gu
arantee”.
Rem
ember, a clas
s will allow yo
u to style th
is paragraph
inde
pendently of
the other pa
ragraphs.
<p class="guarantee">
Our guarantee: at the lounge, we're committed to providing
you, our guest, with an exceptional experience every time you
visit. Whether you're just stopping by to check in on email
over an elixir, or are here for an out-of-the-ordinary dinner,
you'll find our knowledgeable service staff pay attention to every
detail. If you're not fully satisfied, have a Blueberry Bliss
Elixir on us.
</p>
Save your “lounge.html” file and open the “lounge.css” file. You're going
to add a border and background color to the guarantee paragraph. Add
the following CSS to the bottom of your stylesheet and then save.
2
T
he first thre
e properties
add a border
to any
e
lement that i
s in the guar
antee class. S
o far,
t
hat's just thi
s paragraph.
We're making the color of the border black…
…and one pixel thick…
.guarantee {
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
}
We're also givin
g the element a background color, which
will help you se
e the difference between padding and
margins, and m
ake the guarantee look good.
