Classes and IDs
The last section demonstrated how a style sheet can apply a style to all elements in a web page. If we want all our paragraphs to be red, we just need to specify p {color: red} in the style sheet. Easy, we’re done.
But what if we want only some paragraphs to be red? We could override our “red-text” rule by making copious use of the style attribute: <p style="color: black">. However, as “The style Attribute” points out, this is not a good solution in the long term.
Fortunately, there is a way to “name” a style and re-use it over and over. This method is called a style sheet class.
Style Sheet Classes
In Example 3.10, “Two CSS Classes”, we have an exchange of dialogue between two characters. We’ll differentiate each character’s lines by applying a unique style. It would be tedious and counterproductive to write out the full style in each p element, so instead we’ll define each style once in the style sheet and use a class to call it multiple times.
Example 3.10. Two CSS Classes
<html>
<head>
<title>An Ideal Husband</title>
<style type="text/css">
p {color: #000000}
p.goring {color: #ff0000}
p.phipps {color: #008000}
</style>
</head>
<body>
<p class="goring">
LORD GORING. [Taking out old buttonhole.] You see, Phipps, Fashion
is what one wears oneself. What is unfashionable is what other
people wear.
</p>
<p class="phipps">
PHIPPS. Yes, my lord.
</p>
<p class="goring">
LORD GORING. Just as vulgarity is simply the conduct of other
people.
</p>
<p class="phipps">
PHIPPS. Yes, my lord.
</p>
<p class="goring">
LORD GORING. [Putting in a new buttonhole.] And falsehoods the
truths of other people.
<p class="phipps">
PHIPPS. Yes, my lord.
</p>
<p class="goring">
LORD GORING. Other people are quite dreadful. The only possible
society is oneself.
</p>
<p class="phipps">
PHIPPS. Yes, my lord.
</p>
<p class="goring">
LORD GORING. To love oneself is the beginning of a lifelong romance,
Phipps.
</p>
<p class="phipps">
PHIPPS. Yes, my lord.
</p>
</body>
</html>
For each character, we’ve defined a class, goring and phipps. Note that we’ve introduced a brand-new CSS selector: instead of
element{declarations}
We have
element.class{declarations}
Once we define the selectors p.goring and p.phipps, we can apply them to any paragraph through the class attribute. You may add the class attribute to any element that can take the style element (in other words, most of them). The class attribute is usually much better to use than the style attribute, because it’s much easier to change what a class means later on.
In Example 3.10, “Two CSS Classes”, the classes only work with the p element. Applying them to some other element, as in, <em class="goring">, would fail. To make the selector “generic” so that it works with any element, just leave off the element name:
.goring {color: #ff0000}
Unique IDs
Another method for assigning styles is to use an ID. An ID is a unique identifier for a element on a page. IDs are different from classes in a couple of key ways:
-
IDs are unique. You may only use a particular ID once on a page.
-
You can use IDs to create a link to a specific location within a page, as discussed in “Linking Within Pages”.
To apply a style to an ID, the syntax should look familiar. Instead of using a period, use a hash mark (#):
p#goring {color: #ff0000}
That’s it. In order to apply the style, you would just write <p id="goring">, as opposed to <p class="goring">.
The only problem here is that you may only apply id="goring" once on the entire web page. In other words, we are presuming that Lord Goring is speaking only once. Given what we know of Lord Goring, this is probably a bad assumption.
If you use IDs in your style sheets, make sure that they are for unique elements. IDs are ideal for navigation bars, headers, footers, and other elements that appear only once on the page.