HTML and CSS Reference
In-Depth Information
p.warning {
color: red;
font-weight: bold;
}
This rule will assign the red color and bold weight
only to paragraph elements
that have been
assigned the class
warning
. It will not apply to other type elements, even if they have the
warning
class assigned. So, the
h1
in our previous markup would be ignored by this style rule, and it
would not become red and bold. You can use these rules in combination to save yourself some
typing. Take a look at this block of CSS code. We've got two style rules, and each has several of
the same declarations:
p.warning {
color: red;
font-weight: bold
font-size: 11px;
font-family: Arial;
}
h1.warning {
color: red;
font-weight: bold
font-size: 24px;
font-family: Arial;
}
A more efficient way to write this is
.warning {
color: red;
font-weight: bold
font-size: 11px;
font-family: Arial;
}
h1.warning {
font-size: 24px;
}
Class selectors can also be chained together to target elements that have multiple class
names. For example:
<h1 class="warning">Be careful!</h1>
<p class="warning help">Every 108 minutes, the button
➥
must be pushed. Do not attempt to use the computer
➥
for anything other than pushing the button.</p>
<p class="help">The code is 4-8-15-16-23-42.</p
A
.warning
selector will target both the
h1
and first
p
elements, since both have the
class
value
warning
. A
.help
selector will target both
p
elements (both have a
class
value of
help
).
A chained selector such as
.warning.help
will select only the first paragraph, since it is the
only element that has both classes (
warning
and
help
) assigned to it.
