HTML and CSS Reference
In-Depth Information
Head First:
An
id
attribute? I thought those were for those link destinations, like
in Chapter 4?
Class:
id
s 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:
Any time, Head First!
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 Banzai
quotes.
