Table of Contents
Classes and IDs
The last section demonstrated how a style sheet
can apply a style to all tags 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, this
solution is difficult to apply consistently, particularly if our styles are more
complicated than simply changing the text color.
Fortunately, there is a way to "name" a style and re-use it over and over.
Style Sheet Classes
Consider the following example: we have an exchange of dialogue
between three movie characters, and we want to 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> tag. Instead, let's define each style
once in the style sheet -- and call it multiple times by using
a class.
(Quotes courtesy of The Internet Movie Database. Used with permission.)
Three Classes
(source)
<html>
<head>
<title>Galaxy Quest</title>
<style type="text/css">
<!--
p {color: #000000}
p.guy {color: #ff0000}
p.gwen {color: #000080}
p.jason {color: #008000}
-->
</style>
</head>
<body>
<p class="jason">
Jason Nesmith: You're not gonna die on the planet, Guy.
</p>
<p class="guy">
Guy Fleegman: I'm not? Then what's my last name?
</p>
<p class="jason">
Jason Nesmith: It's, uh, uh---I don't know.
</p>
<p class="guy">
Guy Fleegman: Nobody knows! Do you know why?
Because my character isn't important enough for a
last name, because I'm gonna die five minutes in.
</p>
<p class="gwen">
Gwen DeMarco: Guy, you have a last name.
</p>
<p class="guy">
Guy Fleegman: DO I?! DO I?!?! For all you know,
I'm "Crewman Number Six"!
</p>
</body>
</html>
For each character we've defined a class ("guy", "gwen", and "jason"). Note the format: instead of
tagname {style information}
We have
tagname.classname {style information}
The results are as follows:
Three Classes (Results)
Jason Nesmith: You're not gonna die on the planet, Guy.
Guy Fleegman: I'm not? Then what's my last name?
Jason Nesmith: It's, uh, uh---I don't know.
Guy Fleegman: Nobody knows! Do you know why? Because my character isn't important enough for a last name, because I'm gonna die five minutes in.
Gwen DeMarco: Guy, you have a last name.
Guy Fleegman: DO I?! DO I?!?! For all you know, I'm "Crewman Number Six"!
Once we define our classes, we can apply them to any paragraph through the
class attribute. In the simple example above we've just
changed the text color. We could easily have made the styling much
more complicated.
Generic Classes
In the example above, we created our classes to work with the
<p> tag. Applying them to some other
tag (as in, <em class="guy">) would fail. However,
we can create generic classes, which are
classes that are meant to work with any kind of tag. The syntax is as follows:
.guy {color: #ff0000}
Note the absence of a tag name before the period: the class name stands alone.
Caution: Generic Classes
Internet Explorer 4 understands
ordinary classes but doesn't understand generic classes. For this reason, I
avoid using generic classes unless they are absolutely necessary.
Usually, they're not.
Unique IDs
Another method for assigning styles is to use an ID. An ID is a unique identifier for a tag on a page. IDs are different from classes in a couple of ways:
- IDs are unique. You may only use a particular ID once on a page.
- IDs can be used in the same way as named anchors, to create a link to a specific location within a page. However, this technique does not work in some older browsers.
- IDs can be used by a JavaScript script to access a particular component of a web page. JavaScript is beyond the scope of this tutorial.
If you want to apply a style to an ID, the syntax should look familiar. Instead
of using a period, use a hash mark (#):
p#guy {color: #ff0000}
That's it. In order to apply the style, you would just write
<p id="guy"> (as opposed to
<p class="guy">.)
The only problem here is that you may only apply id="guy"
once on the entire web page. In other words, we are presuming
that Guy Fleegman is speaking only once -- probably a bad assumption. If you
use IDs in your style sheets, make sure that they are for unique
elements (such as a navigation bar that appears only once on the page).
