HTML and CSS Reference
In-Depth Information
Adding an element to the greentea class
Open up the “elixir.html” file and locate the “Green Tea Cooler” paragraph.
This is the text we want to change to green. All you're going to do is add the
<p>
element to a class called
greentea
. Here's how you do that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Head First Lounge Elixirs
</title>
<link type="text/css" rel="stylesheet" href="../lounge.css">
</head>
<body>
<h1>
Our Elixirs
</h1>
<h2>
Green Tea Cooler
</h2>
<p class="greentea">
To add an ele
ment to a class, just ad
d
the attribute
“class” along with the
name of the
class, like “greentea”.
<img src="../images/green.jpg
"
alt="Green Tea">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
<h2>
Raspberry Ice Concentration
</h2>
<p>
<img src="../images/lightblue.jpg
"
alt="Raspberry Ice">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg
"
alt="Blueberry Bliss">
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg
"
alt="Cranberry Blast">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
</body>
</html>
Now that the green tea paragraph belongs to the
greentea
class, you just need to
provide some rules to style that class of elements.
