The Class Attribute: Grouping Elements

When you first start with HTML and CSS, all the tags and symbols can feel overwhelming. The good news is that a few simple tools make things much easier. One of the most powerful and beginner‑friendly tools is the class attribute.

In this article, you’ll learn what a class is, how to add it to your HTML, and how to use it to style and organize your page. We’ll walk through examples step by step, and you can follow along in your own browser or code editor.

What is the class attribute?

In HTML, the class attribute is a way to label elements.

You can think of it like putting stickers on items in your house:

You might put a “kitchen” label on all kitchen boxes.
You might put a “fragile” sticker on breakable things.

In the same way, you put a class on HTML elements so you can:

Group similar elements together
Style them all at once using CSS
Find them easily with JavaScript later (when you’re ready for that step)

Here’s a simple HTML element without a class:

<p>This is a paragraph.</p>

Here’s the same element with a class:

<p class="highlight">This is a highlighted paragraph.</p>

class="highlight" is just a label that says, “Hey, this paragraph belongs to the group called highlight.”

Why classes are so useful

When building a web page, you’ll often want to:

Make some text a different color
Style several buttons the same way
Add spacing or backgrounds to certain sections

Instead of repeating the same style over and over for each element, you:

Give those elements the same class name.
Write the style once in CSS.

This saves time and keeps your code clean and easy to update.

Example 1: Your first class

Let’s start with a tiny web page and add a class to one paragraph.

HTML + CSS example

Copy this into a file called index.html, then open it in your browser.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Class Attribute Example</title>

  <style>
    /* This CSS targets any element with the class "highlight" */
    .highlight {
      background-color: yellow;  /* Light yellow background */
      font-weight: bold;         /* Make the text bold */
    }
  </style>
</head>
<body>
  <h1>The Class Attribute</h1>

  <p>This paragraph is normal.</p>

  <p class="highlight">This paragraph has the "highlight" class.</p>
</body>
</html>

What’s happening here?

In the HTML, we added class="highlight" to one <p> element.
In the <style> section, we wrote .highlight { ... }.
- The dot (.) before highlight tells CSS, “Select all elements with the class named highlight.”
The browser applies the yellow background and bold text only to the paragraph with that class.

Result: You’ll see one normal paragraph and one highlighted, bold paragraph.

Example 2: Grouping multiple elements with the same class

The real power of classes is that you can use the same class name on many elements. Then one CSS rule styles all of them.

Update the <body> of your previous example to this:

<body>
  <h1>The Class Attribute</h1>

  <p class="highlight">Important note: Read this first!</p>
  <p>This paragraph is not so important.</p>
  <p class="highlight">Reminder: Save your work often.</p>

  <span class="highlight">Short highlighted text inside a sentence.</span>
</body>

We didn’t change the CSS at all. It still says:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

What’s happening now?

Any element with class="highlight" gets the yellow background and bold text.
We used the same class on two <p> elements and one <span> element.
We wrote the style once, but it affects all matching elements.

Result: All the text with the highlight class stands out, even though they’re different HTML tags.

Try it yourself: Create your own class

Start from Example 2.
Add a new class called note in your <style> section:

.note {
  border: 1px solid #333;  /* Thin dark border */
  padding: 10px;           /* Space inside the box */
  margin: 10px 0;          /* Space above and below */
}

In your HTML <body>, add this:

<p class="note">This is a note box. You can put any message here.</p>

Reload your page. You should see a bordered “note” box separate from your normal text.

Once that works, experiment:

Change the border color
Change the padding value
Add background-color: #f0f0f0; to give it a light gray background

Every time you save and refresh, you’ll see the effect on all elements with class="note".

Example 3: Using multiple classes on one element

Sometimes you want to combine styles. For example, maybe you want something to be both a note and highlighted.

The class attribute allows multiple classes, separated by spaces.

HTML + CSS example

Add this CSS to your <style> section (keep the existing rules too):

/* A general style for all note boxes */
.note {
  border: 1px solid #333;
  padding: 10px;
  margin: 10px 0;
}

/* A style for warning messages */
.warning {
  background-color: #ffe0e0; /* Light red background */
  color: #990000;            /* Dark red text */
}

Now add this to your <body>:

<p class="note">This is a normal note.</p>

<p class="note warning">
  This is a warning note. It uses both the "note" and "warning" classes.
</p>

What’s happening here?

The first paragraph has class="note".
- It gets the border, padding, and margin.
The second paragraph has class="note warning".
- It gets the styles from both .note and .warning.

Result:

The normal note: plain bordered box.
The warning note: bordered box plus light red background and dark red text.

This is a very common pattern: use one class for basic structure (note) and another for type or state (warning, success, etc.).

Example 4: Using classes to style buttons

Let’s create some simple buttons using classes. We’ll use <a> (link) elements and give them button‑like styles.

Add this CSS to your <style> section:

.button {
  display: inline-block;      /* Let us add padding like a box */
  padding: 8px 16px;          /* Vertical and horizontal space */
  background-color: #007bff;  /* Blue background */
  color: white;               /* White text */
  text-decoration: none;      /* Remove underline from links */
  border-radius: 4px;         /* Slightly rounded corners */
  font-family: sans-serif;    /* Clean, simple font */
}

.button-secondary {
  background-color: #6c757d;  /* Gray background for secondary button */
}

Now add this HTML inside <body>:

<a href="#" class="button">Primary Button</a>
<a href="#" class="button button-secondary">Secondary Button</a>

What’s happening here?

Both links use the button class, so they look like blue buttons.
The second link also uses button-secondary, which changes the background color to gray.
We reused the main button style and only changed one thing with an extra class.

Result: Two button‑like elements with consistent styling but different colors.

Tips for choosing class names

Class names are for you, not the browser. Choose names that make sense when you read your code later.

Some simple guidelines:

Use lowercase letters and hyphens (like main-title, note-box, site-header).
Name classes based on purpose, not appearance, when possible.
- Good: warning, error-message, main-nav
- Less good: red-text, big-box (because styles might change later)
Keep names short but clear.

Examples of good class names

<p class="intro">Welcome to my website!</p>
<nav class="main-nav">...</nav>
<div class="card">...</div>

These names describe what the element is, not just how it looks.

Try it yourself: Mini practice

Here’s a quick practice idea:

Create three paragraphs.
Give them these class combinations:
- First: class="intro"
- Second: class="intro note"
- Third: class="note warning"
In your CSS, define .intro, .note, and .warning with different colors and borders.

See how different combinations of the same few classes can create several distinct styles. This is exactly how real websites stay organized and flexible.

Quick recap and what’s next

You’ve just learned how the class attribute helps you:

Label and group elements in your HTML
Apply the same CSS styles to many elements at once
Combine multiple classes on a single element for flexible design

If you can:

Add class="something" to an element
Target it in CSS with .something { ... }

…you’ve unlocked one of the most important building blocks of web development.

Next steps you can explore:

Learn about the id attribute and how it differs from class
Practice building a simple page with sections like header, main, footer, each with their own classes
Look up “CSS class selectors” to see more styling ideas

Keep experimenting, even with tiny changes. Every class you add and style you tweak is a real step forward in your coding journey.

Mudzinga