HTML and CSS Reference
In-Depth Information
Welcome back, and good timing. We're just about to listen
in on an interview with a class…
The Class Exposed
This week's interview:
Are classes always right?
Head First:
Hey, Class; you know we've been making good use of you, but we
still don't know a lot about you.
Class:
Well, there's not all that much to know. If you want to create a “group, ”
so to speak, that you can style, just come up with a class, put your elements in it,
and then you can style all the elements in that class together.
Head First:
So the class lets you take sets of elements and apply one or more
style properties to them?
Class:
Exactly. Say you have some holiday-themed areas in your page—one
Halloween, one Christmas. You could add all Halloween elements to the
halloween
class and all Christmas elements to the
christmas
class. Then you
can style those elements independently—say, orange for Halloween and red for
Christmas—by writing rules that apply to each class.
Head First:
That makes a lot of sense. We just saw a good example of that in
this chapter, didn't we?
Class:
I'm not sure; I was off working. You'll have to catch me up.
Head First:
Well, we have a paragraph on the Head First Lounge page that
contains a written guarantee from the owners, and they want this paragraph to
stand out independently of the other paragraphs.
Class:
So far, so good…but let me ask you this: are there a few of these
paragraphs, or just the one?
Head First:
Well, I don't think there is any reason to have multiple guarantee
paragraphs, and I don't see the same style being applied anywhere else in the
page, so just the one.
Class:
Hmmm, I don't like the sound of that. You see, classes are meant to be
used for styles that you want to reuse with multiple elements. If you've got one
unique element that you need styled, that's not really what classes are for.
Head First:
Wait a second
—
a class seemed to work perfectly…how can this be
wrong?
Class:
Whoa, now, don't freak out. All you need to do is switch your
class
attribute to an
id
attribute. It will only take you a minute.
