Hooks for CSS: the class and id Attributes

After this lesson you can

• Add class and id attributes to elements, including several classes on one element
• Choose between a class and an id, and name a class for what it is rather than how it looks

Key takeaways

• A class is a label many elements can share, written class="pet-card". CSS finds it with .pet-card, read "dot pet-card".
• An id names one element and is used once per page, written id="adopt-biscuit". CSS finds it with #adopt-biscuit, read "hash adopt-biscuit".
• One element can have several classes, separated by spaces, as in class="pet-card adopted".
• Name a class for what the thing is (pet-card), not for how it looks (blue-box), so the name stays true when the design changes.

The "Meet Biscuit" page ends with two cards for other pets you might like, Pepper and Clover, and they should look exactly alike. A rule for article would style them, but it would also style every other article on the site, including the ones that aren't cards. CSS needs a way to say "these ones" and "that one". The class and id attributes are that way, and class is the attribute you'll type most when you write CSS: frameworks such as Bootstrap and Tailwind work almost entirely through class names.

A class: a name tag many can wear

At the Paws & Whiskers shelter, every volunteer wears the same name tag: Volunteer. Anyone looking for help finds a volunteer by the tag, whoever is wearing it. A class is that name tag for elements: a label that any number of them can share.

<article class="pet-card">
  <h3>Pepper</h3>
  <p>A two-year-old cat who sleeps in sunbeams and chases paper balls.</p>
</article>
<article class="pet-card">
  <h3>Clover</h3>
  <p>A one-year-old rabbit who will do almost anything for parsley.</p>
</article>

Both cards wear the class pet-card. Any element can have a class: an <article>, a <p>, and the meaning-free <div> and <span> from Structure Elements: header, nav, main, section and footer, which is how those boxes get styled.

An id: a name for one

Each animal at the shelter has its own kennel number, and no two share one. An id works the same way: it names one element, and no other element on the page may use the same id.

<section id="adopt-biscuit">
  <h2>Adopt Biscuit</h2>
  <p>Fill in the form, and a volunteer will call you within two days.</p>
</section>

Besides CSS, an id gives a link somewhere to land. A link whose href is #adopt-biscuit (read "hash adopt-biscuit") jumps straight to that section, which is how "skip to the form" links work.

Several classes on one element

A person can wear more than one tag: Volunteer and Dog walker. An element can have several classes too, in one class attribute, separated by spaces:

<article class="pet-card adopted">
  <h3>Mango</h3>
  <p>Adopted last week by a family with a big backyard.</p>
</article>

This card is a pet-card and adopted, so it can look like every other card plus something extra, such as an "Adopted!" ribbon. That space matters: class="pet-card adopted" is two classes, so a class name can never contain a space. Write one class attribute with every name in it. A second class attribute on the same element is ignored.

How CSS finds them

In CSS, a dot in front of a name means "elements with this class", and a hash means "the element with this id":

.pet-card {
  background-color: lavenderblush;
}

#adopt-biscuit {
  background-color: honeydew;
}

.pet-card is read "dot pet-card", and #adopt-biscuit "hash adopt-biscuit". The next chapter, Selectors, Color and Text, covers these selectors in depth. For now, know that most teams style with classes and keep ids for links and forms: a style written for an id is hard to override later, and Module 2 shows why.

Try it. Add the two pet-card articles to the <main> of your meet-biscuit.html, and the .pet-card rule to styles.css. Save, and both cards change together. Add a third card with the same class: it's styled the moment it appears, with no new CSS.

Name it for what it is

You could name the card's class pink-box. Then the shelter changes its brand color to green, and every card is a green box with a class that says pink. Name a class for what the thing is, and the name stays true whatever it looks like:

Class names and ids are written in lowercase, with hyphens between words (pet-card, adopt-biscuit). This style is called kebab case, because the words look like pieces on a skewer. Capital letters count, so Pet-Card and pet-card are two different classes, and a name that starts with a letter works in CSS with no extra fuss.

Class or id?

• Something that appears more than once, or might one day (cards, buttons, prices): a class.
• One element on the page that a link needs to land on, or a form needs to find: an id.
• Not sure? Use a class. A class can be used once, and nothing breaks if a second one turns up.

Check yourself

2 questions to try on the lesson page.

So what

With classes and ids, your CSS can aim at exactly the elements you mean, no more and no less. Good names are a gift to the next person who reads your stylesheet, and that person is often you.

Key terms

• class attribute
• id
• Attribute

Cheat sheets

• Hooks for CSS: the class and id Attributes

Related

• Structure Elements: header, nav, main, section and footer
• Elements, Tags and Attributes