HTML Classes: The class Attribute Explained

The HTML class attribute gives elements a reusable name so CSS and JavaScript can find and style them. Learn how to add classes, use multiple classes, share them and name them well.

What is the class attribute in HTML?

The class attribute gives an element a label that you choose. Many elements can share the same label. Then CSS can say "make everything labelled price green", and JavaScript can say "find everything labelled card".

Think of a school uniform with a colored badge. Every student in the "blue team" wears a blue badge. The teacher can say "blue team, stand up" without calling each name. A class works the same way: it groups elements so you can talk to all of them at once.

You met class briefly in the lesson about <div> and <span>. Here we go deeper.

<p class="intro">Welcome to Bright Fitness, the friendliest gym in town.</p>
<p>We have classes every day from 6 am.</p>

On its own, a class changes nothing you can see. It is just a name. It becomes useful when CSS or JavaScript uses it.

Using a class with CSS

In CSS, you select a class with a dot followed by the class name. In the HTML you write class="price" with no dot; in the CSS you write .price with a dot.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shop - Green Leaf</title>
  <style>
    .price {
      color: #2e6b3f;
      font-weight: bold;
    }
    .sold-out {
      color: #999999;
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <h1>Plants for sale</h1>
  <p>Snake plant: <span class="price">£14.00</span></p>
  <p>Peace lily: <span class="price">£18.50</span></p>
  <p>Fiddle leaf fig: <span class="sold-out">£32.00</span></p>
</body>
</html>

Both prices with class="price" appear in bold green, from just one CSS rule. The sold-out price is grey with a line through it. If you add 100 more products, they all get the same look automatically.

How to use multiple classes on one element

An element can have more than one class. Separate the names with spaces inside the same class attribute. This lets you combine a basic style with extras, like building blocks.

<style>
  .btn {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    color: white;
    background-color: #555555;
  }
  .btn-primary {
    background-color: #1f6feb;
  }
  .btn-danger {
    background-color: #c62828;
  }
  .btn-large {
    font-size: 1.25rem;
    padding: 14px 26px;
  }
</style>

<button class="btn">Cancel</button>
<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Delete account</button>
<button class="btn btn-primary btn-large">Join now</button>

All four buttons share the btn shape: padding, rounded corners and white text. "Save" adds blue, "Delete account" adds red, and "Join now" is blue and bigger. The order of classes inside the attribute does not matter; the order of rules in the CSS does.

Common mistake: Writing two class attributes, like class="btn" class="btn-primary". The browser only uses the first one. Put all class names in one attribute, separated by spaces: class="btn btn-primary".

Sharing classes across different elements

A class is not tied to one type of element. A <p>, an <li> and a <div> can all have class="highlight", and one CSS rule styles them all.

<style>
  .highlight {
    background-color: #fff4c2;
    border-left: 4px solid #f2b705;
    padding: 8px;
  }
</style>

<p class="highlight">New: online booking is now open.</p>
<ul>
  <li>Yoga - Monday 7 pm</li>
  <li class="highlight">Spinning - Tuesday 6 pm (new class!)</li>
  <li>Pilates - Thursday 7 pm</li>
</ul>
<div class="highlight">
  <h2>Summer offer</h2>
  <p>First month half price.</p>
</div>

The paragraph, the one list item and the whole div all get a pale yellow background and a yellow bar on the left. This is the big difference from an id, which must be unique (you will learn ids in the next lesson).

How to name classes well

Good class names make your code easy to understand months later.

• Describe the purpose, not the look. .error-message is better than .red-text. If the design changes to orange, .red-text becomes a lie.
• Use lowercase and dashes, like product-card or main-nav. This style is called kebab-case.
• No spaces inside one name. A space starts a new class: class="product card" is two classes, product and card.
• Don't start with a number. .3-columns is awkward to select in CSS; use .three-columns or .cols-3.
• Class names are case-sensitive. Price and price are different classes.

Some teams use a naming system called BEM (Block, Element, Modifier), like card, card__title and card--featured. You don't need it yet, but you will see it in many projects.

Good name	Weak name	Why
site-header	top-blue-box	Describes the job, not the look
price	bold-green	Still true if the style changes
warning	w1	Clear to anyone reading the code

Using classes in JavaScript

JavaScript can find elements by class and add or remove classes. This is how many interactive features work: JavaScript changes the class, CSS changes the look.

<style>
  .hidden { display: none; }
</style>

<button class="btn" id="toggle-faq">Show answer</button>
<p class="faq-answer hidden">Yes, we have free parking behind the building.</p>

<script>
  const button = document.querySelector('#toggle-faq');
  const answer = document.querySelector('.faq-answer');

  button.addEventListener('click', () => {
    answer.classList.toggle('hidden');
  });
</script>

At first the answer is hidden, because it has the hidden class. Each click on the button runs classList.toggle('hidden'), which removes the class if it is there and adds it if it is not, so the answer appears and disappears. document.querySelector('.faq-answer') uses the same dot syntax as CSS. To find all elements with a class, use document.querySelectorAll('.price').

Tip: Let JavaScript change classes, and let CSS decide what each class looks like. This keeps your styling in one place. Learn more on MDN: classList.

Practice exercise

Build a list of three blog post cards. Give each card class="card" and make the CSS add a border and padding. Make one card stand out with an extra class card-featured that adds a colored background. Give every date class="post-date" and make the dates small and grey.

Hint: the featured card's attribute should be class="card card-featured", and in CSS you need .card, .card-featured and .post-date.

Key takeaways

• The class attribute gives elements a reusable name; many elements can share one class.
• In CSS, select a class with a dot: .price.
• One element can have several classes, separated by spaces in one attribute.
• Name classes by purpose, in lowercase with dashes.
• JavaScript can find elements by class and add, remove or toggle classes with classList.