Classes Ids - HTML Tutorial
In the previous section, we saw how a style sheet can apply a style to all elements of a certain type. For example, to make all paragraphs red, we could write p { color: red; } in the style sheet. Simple enough.
But what if we want only some paragraphs to be red? One approach is to override the general style using the style attribute on individual elements, like <p style="color: black">. As discussed in “The style Attribute”, this approach is not ideal for maintainable code.
Fortunately, CSS offers a better solution: classes. Classes let you define a style once and re-use it across multiple elements.
Style Sheet Classes
In Example 3.10, “Two CSS Classes”, we differentiate two characters’ dialogue by assigning each a unique style. Instead of repeating the full style for every paragraph, we define the style once in the CSS and apply it through a class.
<html>
<head>
<title>An Ideal Husband</title>
<style>
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>
<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>Here, we’ve defined two classes: goring and phipps. Notice the CSS selector syntax:
element { declarations; }When using classes, we extend this syntax:
element.class { declarations; }Once defined, you can apply a class to any compatible element using the class attribute. This is usually preferable to inline styles because it’s easier to update the style in one place later.
To make a class work with any element, not just a specific one, omit the element name:
.goring { color: #ff0000; }Unique IDs
Another way to assign styles is with IDs. An ID uniquely identifies a single element on a page. Key differences between IDs and classes:
- IDs must be unique: each ID can only appear once per page.
- IDs can also be used for internal links, as described in “Linking Within Pages”.
To style an ID, use a hash symbol (#) instead of a period:
p#goring { color: #ff0000; }Apply it in HTML as <p id="goring">. Remember: since an ID is unique, you can only use it once per page. IDs are best suited for elements that appear only once, such as headers, footers, or navigation sections.