Class Selectors: Styling Groups of Elements

If you’ve ever wished you could change the look of many elements on a web page all at once, class selectors are exactly what you need.

In this article, you’ll learn what CSS class selectors are, how to use them, and how they help you avoid repeating the same styles over and over. We’ll walk through simple, hands-on examples you can copy, paste, and tweak on your own.

By the end, you’ll be able to:

Create and use CSS classes
Apply the same style to many elements at once
Mix and match classes to build flexible designs

Let’s start from the beginning.

What is a class selector?

CSS (Cascading Style Sheets) is the language that controls how your web page looks. A selector is how you tell CSS which elements to style.

A class selector is a way to style a group of elements that share the same “label,” called a class. You add the class in your HTML, then style that class in your CSS.

Think of a class like a sticker. Any element with the same sticker can be styled the same way.

Basic setup: HTML + CSS

Before working with class selectors, let’s create a small HTML file and link a CSS file.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Class Selector Basics</title>

  <!-- Link to our CSS file -->
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>My First Class Selector Page</h1>
  <p>We will style this page using CSS classes.</p>
</body>
</html>

styles.css

/* For now, this file is empty. We will add styles soon. */

Save both files in the same folder. Open index.html in your browser (Chrome, Firefox, etc.). You should see a plain page with a heading and a paragraph.

Example 1: Your first class selector

Let’s create a class that makes text blue and slightly larger.

Step 1: Add a class to HTML

In HTML, you use the class attribute to give an element a class name.

Update your <p> tag like this:

<p class="highlight-text">We will style this page using CSS classes.</p>

Here:

class="highlight-text" is adding a class called highlight-text to this paragraph.
You can choose almost any name, but avoid spaces. Use dashes or underscores instead.

Step 2: Style that class in CSS

Now, open styles.css and add:

/* Class selector: note the dot (.) before the name */
.highlight-text {
  color: blue;          /* Make the text blue */
  font-size: 1.2rem;    /* Slightly larger text */
}

Important details:

The dot (.) before highlight-text tells CSS this is a class selector.
Anything inside { } is the style for that class.

Expected result: Refresh your browser. The paragraph with the highlight-text class should now appear blue and slightly bigger than normal.

If you see no change, double-check:

The class name in HTML and CSS matches exactly
The CSS file is correctly linked in the <head> with href="styles.css"

Example 2: Reusing the same class on multiple elements

The real power of classes is reuse. You can apply the same class to many elements, and they’ll all get the same style.

Step 1: Add more elements with the same class

Update body in index.html:

<body>
  <h1>My First Class Selector Page</h1>

  <p class="highlight-text">We will style this page using CSS classes.</p>

  <p class="highlight-text">This paragraph also uses the highlight-text class.</p>

  <span class="highlight-text">Even this short piece of text uses the same class!</span>
</body>

Here you’re using highlight-text on:

Two <p> (paragraph) elements
One <span> (a generic text container)

Step 2: See the effect

You don’t need to change the CSS. The same .highlight-text rule will now style all three elements.

Expected result:

Both paragraphs and the span text will be blue and slightly bigger.

This shows how a single class can style many pieces of content. If you ever want to change the color later, just edit the class in one place.

Example 3: Multiple classes on one element

Sometimes you want to combine styles. For example, one class for text color, another for spacing or borders.

You can give an element more than one class by separating the class names with spaces.

Step 1: Create separate utility-style classes

Update styles.css:

/* A class for blue text */
.text-blue {
  color: blue;
}

/* A class for adding extra space around an element */
.box-padding {
  padding: 10px;          /* Space inside the element */
  background-color: #f0f0f0; /* Light gray background */
}

/* A class for rounded corners and a border */
.box-border {
  border: 1px solid #ccc;  /* Light gray border */
  border-radius: 5px;      /* Rounded corners */
}

Step 2: Use multiple classes in HTML

In index.html, add a new element:

<div class="text-blue box-padding box-border">
  This box uses three classes at the same time.
</div>

What’s happening here:

text-blue makes the text blue
box-padding adds inner spacing and a light background
box-border adds a border and rounded corners

The browser simply combines all the rules from each class.

Expected result: You should see a blue text box with padding, a gray background, and a soft border.

This approach keeps your styles flexible and easy to update.

Example 4: Styling button-like links

Let’s build something more practical: button-style links you can reuse across your site.

Step 1: Add links in HTML

In index.html, add this under your other content:

<a href="#" class="btn">Default Button</a>
<a href="#" class="btn btn-primary">Primary Button</a>

Step 2: Create button classes in CSS

Add this to styles.css:

/* Base button style */
.btn {
  display: inline-block;   /* Make it behave more like a button */
  padding: 8px 16px;       /* Vertical and horizontal padding */
  text-decoration: none;   /* Remove underline from links */
  border-radius: 4px;      /* Slightly rounded corners */
  font-weight: bold;       /* Make text bold */
  color: white;            /* Text color */
  background-color: #555;  /* Dark gray background */
}

/* Primary button style (adds on top of .btn) */
.btn-primary {
  background-color: #007bff; /* Blue background */
}

/* Optional: change color on hover */
.btn:hover {
  background-color: #333;     /* Darker gray on hover */
}

.btn-primary:hover {
  background-color: #0056b3;  /* Darker blue on hover */
}

How it works:

.btn defines the common look of all buttons
.btn-primary is an extra class that changes only the background color
The second link uses both classes: class="btn btn-primary"

Expected result:

The first link looks like a dark gray button
The second link looks like a blue button
Both change color when you hover the mouse over them

This pattern—base class + modifier class—is very common in real projects.

Try it yourself: Experiment with classes

Here are a few small challenges to practice:

Create a warning text class
- Make a class called .warning-text
- Color: red, Font-weight: bold
- Apply it to a paragraph that explains an important note.
Make a success badge
- Create a .badge class that has: small padding, green background, white text, rounded corners
- Use it on a <span> to show something like “New” or “Success”.
Combine new and existing classes
- Use both .text-blue and .box-padding on one element
- See how the styles merge together.

Play around, break things, and then fix them. That’s how you learn.

Common beginner questions

1. Can I use the same class name on many elements?
Yes, that’s exactly what classes are for. Use them wherever you want the same styling.

2. Can one element have multiple classes?
Yes. Separate class names with spaces, like class="btn btn-primary".

3. What’s the difference between a class and an ID?

A class can be used on many elements
An ID should be unique on the page (used only once)
For styling groups of elements, classes are usually the right choice.

Quick recap and what’s next

You’ve just learned how to:

Use class selectors in CSS (the . before the class name)
Apply the same style to multiple elements by reusing a class
Combine several classes on one element to build flexible designs
Create practical, reusable pieces like button styles

These skills might feel small, but they’re the foundation of real-world web design. With class selectors, you can keep your code cleaner, avoid repeating yourself, and update your site’s look quickly.

What’s next?

Try adding more classes for colors, spacing, and backgrounds
Explore hover states and other interactions
Learn about IDs and element selectors to round out your CSS toolkit

Keep experimenting, and remember: every new class you create is another building block in your web design toolbox. You’re doing great—keep going!

Mudzinga