HTML and CSS Reference
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:
<title> Head First Lounge Elixirs </title>
<link type="text/css" rel="stylesheet" href="../lounge.css">
<h1> Our Elixirs </h1>
<h2> Green Tea Cooler </h2>
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.
<h2> Raspberry Ice Concentration </h2>
<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.
<h2>Blueberry Bliss Elixir</h2>
<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.
<h2>Cranberry Antioxidant Blast</h2>
<img src="../images/red.jpg " alt="Cranberry Blast">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
Now that the green tea paragraph belongs to the greentea class, you just need to
provide some rules to style that class of elements.