HTML and CSS Reference
In-Depth Information
In your “elixir.html” file, change the greentea paragraph to include all the classes,
like this:
<p class="greentea raspberry blueberry">
purple
Save and reload. What color is the Green Tea Cooler paragraph now?
Next, reorder the classes in your HTML:
<p class="raspberry blueberry greentea">
purple
Save and reload. What color is the Green Tea Cooler paragraph now?
Next, open your CSS file and move the p.greentea rule to the bottom of the file.
N
ow,
it's g
reen,
beca
use
t
he g
reent
ea ru
le co
mes
green
Save and reload. What color is the Green Tea Cooler paragraph now?
l
ast in
the
CSS
file.
Finally, move the p.raspberry rule to the bottom of the file.
No
w, it's blue, because
th
e raspberry rule comes
las
t in the CSS file.
blue
Save and reload. What color is the Green Tea Cooler paragraph now?
After you've finished, rewrite the green tea element to look like it did originally:
<p class="greentea">
O
kay, n
ow t
he <
p>
el
emen
t only
belo
ngs
green
Save and reload. What color is the Green Tea Cooler paragraph now?
to
one
class
, so w
e us
e
th
e mo
st sp
ecifi
c rule
,
w
hich
is p.g
reent
ea.
