Section 10.30. The Class Exposed

10.30. 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. Head First: An id attribute? I thought those were for those destination anchors, like in Chapter 4? Class: ids have lots of uses. They're really just unique identifiers for elements. Head First: Can you tell us a little more about id attributes? This is all news to me. I mean, I just went through an entire chapter using class incorrectly! Class: Hey, no worries; it's a common mistake. Basically all you need to know is that you use a class when you might want to use a style with more than one element. And, if what you need to style is unique and there's only one on your page, then use an id. The id attribute is strictly for naming unique elements. Head First: Okay, I think I've got it, but why does it really matter? I mean, class worked just fine for us. Class: Because there are some things you really want only one of on your page. The guarantee paragraph you mentioned is one example; but there are better examples, like the header or footer on your page, or a navigation bar. You're not going to have two of those on a page. Of course, you can use a class for just one element, but someone else could come along and add another element to the class, and then your element won't have a unique style anymore. It also becomes important when you are positioning HTML elements, which is something you haven't gotten to yet. Head First: Well, okay, Class. This conversation has certainly been educational for us. It sounds like we definitely need to convert that paragraph from a class to an id. Thanks again for joining us. Class: Anytime, Head First! BRAIN POWER Choose whether you'd use class or id for the following elements: id class   id class   A paragraph containing the footer of a page. A set of <p> elements containing movie reviews. A set of headings and paragraphs that contain company biographies. An <ol> element containing your to do list. An <img> element containing a "picture of the day." <q> elements containing Buckaroo Bonzai quotes. Answer: The footer, the picture of the day, and the to do list are great candidates for using id.