What Is a Class in HTML?

A class is a label that CSS and JavaScript use to select HTML elements. Give several elements the same class name, and one CSS rule or one script can target all of them at once. The class does nothing by itself; it's a hook for your stylesheet and your code to grab onto.

The syntax: a dot in CSS, a bare name in HTML

In a stylesheet, the selector takes a leading dot (.note). In the markup, the class attribute takes the bare name, no dot, and multiple names are separated by spaces. MDN's HTML reference defines the attribute as a list of classes separated by ASCII whitespace.

Here are both halves of a working example. The CSS rule:

.note { font-size: 14px; color: orange; padding: 20px; }

And the HTML that joins the class:

• <p class="note">First paragraph</p>
• <div class="note">A box</div>
• <div class="note highlight">A box with two classes</div>

The paragraph and both boxes get the orange, padded styling from the single .note rule, even though they're different elements. The last box also picks up whatever a .highlight rule defines, because it carries two space-separated classes.

Class vs. ID

Use a class for styling, whether one element needs the rule or fifty. Reach for an ID only when an element needs a unique identifier in the document, not just a style. The two attributes follow different rules:

• Class: reusable, and the right hook for CSS. Any number of elements can share one class, one element can carry several, and class selectors keep specificity low, so your rules stay easy to override.
• ID: unique. An ID can appear on only one element per page. Use it as a fragment-link target (yoursite.com/page#pricing), to wire up HTML associations like a label's for attribute, or as a document.getElementById() hook in scripts.

Styling through an ID works, but the selector's extra specificity means every later override has to fight it. When in doubt, style with a class and let IDs handle identity.

When a class doesn't work

The usual culprit is a mismatch. The name in your HTML must match the name in your stylesheet exactly, and class matching in selectors is case-sensitive: class="Note" will never match .note. Three things to check:

• A typo fails silently. The browser reports no error; the rule simply never matches. Compare the two names character by character.
• The name isn't a valid CSS identifier. A class that starts with a digit (like 1234) or contains a character such as ? must be escaped before a selector can use it, so choose names built from letters and hyphens that need no escaping.
• Something outweighs it. An ID selector or an inline style attribute beats a class rule in the cascade, so your rule can match and still lose.

One more habit worth adopting: MDN recommends naming classes for what an element is (warning) rather than how it looks (red-text). If a redesign turns your warnings blue, .red-text becomes a lie; .warning stays true.