HTML Classes

Names for groups

The class attribute puts an element into one or more named groups. CSS uses those names to style every member the same way. JavaScript can find the group and change it. The name is not unique: as many elements as you like can share a class.

Write the name in the HTML. Select it in CSS with a dot in front: .note means “every element whose class list includes note”.

A single class

The most common pattern is one descriptive name. Here every tip uses class="note".

<p class="note">Oven is hot. Use the cloth.</p>
<p class="note">Soup of the day: tomato.</p>
<p>Regular paragraph, no extra class.</p>

Two paragraphs belong to the note group. The third does not. Style or script the group without touching every other p on the page.

One element, many classes

Separate class names with spaces. The element is a member of each group at once. Order in the attribute does not matter to HTML. CSS source order and specificity decide which rules win when they conflict.

<div class="card featured">Featured lunch</div>
<div class="card">Regular lunch</div>
<p class="note warning">Allergen: nuts in the pesto.</p>

The first card is both a card and featured. Shared styles live on .card. Extra styles for the highlight live on .featured. The warning note can look like other notes and still use a stronger color from .warning.

Select a class in CSS

In CSS, a class selector starts with a dot. That is how you tell a class name from a tag name:p is every paragraph; .card is every element with that class.

<style>
  .card {
    border: 1px solid #cbd5e1;
    padding: 1rem;
    border-radius: 0.5rem;
    max-width: 18rem;
  }
  .card h2 {
    margin-top: 0;
  }
  .price {
    font-weight: 700;
  }
</style>

<div class="card">
  <h2>Espresso</h2>
  <p>Short and hot.</p>
  <p class="price">2.50</p>
</div>
<div class="card">
  <h2>Still water</h2>
  <p class="price">1.00</p>
</div>

Both cards share the same box. Only the price line uses .price. Try this in/html/try and add a third card — you do not copy the CSS again.

Class is not unique

That is the point. Reuse a class on every similar element. If you need a name that must appear only once on the page, that is an id — the next chapter.

Classes and JavaScript

Scripts find groups with document.querySelectorAll('.card') ordocument.getElementsByClassName('card'). The same name you used for CSS is the name you use in the script. You will see a tiny click example in the JavaScript chapter. For now, remember: class names are hooks for both style and behavior.

Name them for people

Pick names that say what the group is, not how it looks today. card andnote still make sense if you change the color. blue-box does not.

• Letters, digits, hyphens, and underscores. Start with a letter.
• Do not put a dot in the HTML. The dot belongs only in the CSS selector.
• Do not use spaces inside one name. Spaces start a second class.

Next: id for names that must be unique — jump links, form labels, and one-off styles.