HTML and CSS Reference
In-Depth Information
Cool! Yes, that works. One
more question…you said being in
a class is like being in a club. Well,
I can join many clubs. So, can an
element be in more than one class?
Yes, elements can be in more than one class.
It's easy to put an element into more than one class. Say
you want to specify a
<p>
element that is in the
greentea
,
raspberry
, and
blueberry
classes. Here's how you would
do that in the opening tag:
<p class="greentea raspberry blueberry">
So, for example, I
could put an <h1> into my “products”
class that defines a font size and
weight, and also a “specials” class
to change its color to red when
something's on sale?
Exactly. Use multiple classes when you want
an element to have styles you've defined in
different classes. In this case, all your
<h1>
elements associated with products have a
certain style, but not all your products are on
sale at the same time. By putting your “specials”
color in a separate class, you can simply add
only those elements associated with products on
sale to the “specials” class to add the red color
you want.
Now you may be wondering what happens when an element belongs
to multiple classes, all of which define the
same
property
—
like our
<p>
element up there. How do you know which style gets applied? You know
each of these classes has a definition for the
color
property. So, will the
paragraph be green, blue (raspberry), or purple?
We're going to talk about this in great detail after you've learned a bit
more CSS, but on the next page you'll find a quick guide to hold you over.
