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

Custom Search