HTML and CSS Reference
In-Depth Information
I was thinking it would be
cool to have the text below
each elixir match the color of
the elixir. Can you do that?
We're not sure we agree with the
aesthetics of that suggestion, but
hey, you're the customer.
Can you style each of these paragraphs separately
so that the color of the text matches the drink? The
problem is that using a rule with a
p
selector applies the
style to
all
<p>
elements. So, how can you select these
paragraphs individually?
That's where
classes
come in. Using both HTML and
CSS, we can define a class of elements, and then apply
styles to any element that belongs to that class. So, what
exactly is a class? Think of it like a club
—
someone starts
a “greentea” club, and by joining you agree to all the
rights and responsibilities of the club, like adhering to
their style standards. Anyway, let's just create the class
and you'll see how it works.
Creating a class takes two steps: first, we add the
element to the class by adding a class attribute to the
element in the HTML; second, we select that class in
the CSS. Let's step through that…
Green
text
B
lue text
Purple text
Red text…
oh, we
don't need
to
change this
one.
