HTML and CSS Reference
In-Depth Information
Giving Starbuzz some style…
Now that you've got a
<style>
element in the HTML head, all you need to
do is supply some CSS to give the page a little pizzazz. Below you'll find some
CSS already “baked” for you. Whenever you see the logo, you're
seeing HTML and CSS that you should type in as-is.
Trust us
. You'll learn how
the markup works later, after you've seen what it can do.
Ready
Bake
So, take a look at the CSS and then add it to your “index.html” file. Once
you've got it typed in, save your file.
Ready Bake
CSS
<html>
<head>
<title>
Starbuzz Coffee
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
CSS
use
s a
synt
ax t
hat
padding: 10px 10px 10px 10px;
is t
otal
ly d
iffe
rent
fro
m H
TML
.
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>
Starbuzz Coffee Beverages
</h1>
<h2>
House Blend, $1.49
</h2>
<p>
A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.
</p>
<h2>
Mocha Caffe Latte, $2.35
</h2>
<p>
Espresso, steamed milk and chocolate syrup.
</p>
<h2>
Cappuccino, $1.89
</h2>
<p>
A mixture of espresso, steamed milk and milk foam.
</p>
<h2>
Chai Tea, $1.85
</h2>
<p>
A spicy drink made with black tea, spices, milk and honey.
</p>
</body>
</html>
