HTML and CSS Reference
In-Depth Information
The Starbuzz CEO has decided to add a
drinks menu column to the Starbuzz Coffee
web page. He wants the new column to go
on the left side, and be 20% of the width of
the browser window. Your job is to add the
new HTML to the existing page in the correct
position, and then finish up the CSS below to
make sure it displays as a table cell, like the
other two columns do. Check your solution at
the end of the chapter.
Th e
H T
M L
fo r
t h e
m e n
u
<div id="drinks">
<h1>BEVERAGES</h1>
<p>House Blend, $1.49</p>
<p>Mocha Cafe Latte, $2.35</p>
<p>Cappuccino, $1.89</p>
<p>Chai Tea, $1.85</p>
<h1>ELIXIRS</h1>
<p>
We proudly serve elixirs brewed by our friends
at the Head First Lounge.
</p>
<p>Green Tea Cooler, $2.99</p>
<p>Raspberry Ice Concentration, $2.99</p>
<p>Blueberry Bliss Elixir, $2.99</p>
<p>Cranberry Antioxidant Blast, $2.99</p>
<p>Chai Chiller, $2.99</p>
<p>Black Brain Brew, $2.99</p>
</div>
Th
e n e
w C
S S …
yo u
n e e d
to
f i n i
sh it
u p !
#drinks {
_________________________;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}
