Glossary
HTMLCSSJavaScriptPythonSwiftTypeScriptSQLReact

CSS

CSS Class Attribute: Syntax, Usage, and Examples

The CSS class attribute lets you group and style one or more HTML elements. It’s a powerful way to apply consistent design rules without repeating code.

How to Use the Class Attribute in CSS

You assign a class to an HTML element using the class attribute. Then, in your stylesheet, you define a rule using a dot (.) followed by the class name.

Here's a working example: 

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ol> TO DO:
    <li class="gray-element">Floss</li>
    <li>Feed Cat</li>
    <li class="gray-element">Nap</li>
    <li>Plan holiday</li>
    <li class="gray-element">Order tea</li>
  </ol>
</body>

And the corresponding CSS: 

.gray-element {
  background-color: lightgrey;
}

In this example, the gray-element class is used to highlight specific tasks by changing their background color.

When to Use the CSS Class Attribute

The class attribute in CSS is one of the most flexible tools for applying styles. It allows you to:

1. Reuse Styles Across Multiple Elements

A single class can be applied to several HTML elements, so you don't need to repeat your CSS rules. 

<p class="highlight">First paragraph</p>
<p class="highlight">Second paragraph</p>


.highlight {
  font-weight: bold;
  color: #333;
}

2. Target Specific Groups of Elements

Use different class names to create style variations between similar elements. 

<button class="primary-btn">Save</button>
<button class="secondary-btn">Cancel</button>

3. Work with JavaScript or CSS Frameworks

JavaScript often selects elements by class name, and many CSS frameworks like Tailwind, Bootstrap, or Bulma rely heavily on class-based styling. 

document.querySelector('.primary-btn').addEventListener('click', saveData);

Examples of the Class Attribute in CSS

Example 1: Styling Alerts 

<div class="alert error">Something went wrong!</div>
<div class="alert success">Operation completed!</div>


.alert {
  padding: 10px;
  border-radius: 4px;
}

.error {
  background-color: #fdd;
  color: #a00;
}

.success {
  background-color: #dfd;
  color: #0a0;
}

Here, the alert class sets shared styles, while error and success apply unique styles for different message types.

Example 2: Highlighting Navigation Links 

<nav>
  <a href="#" class="nav-item active">Home</a>
  <a href="#" class="nav-item">About</a>
</nav>


.nav-item {
  padding: 10px;
  text-decoration: none;
  color: black;
}

.active {
  font-weight: bold;
  border-bottom: 2px solid #000;
}

Combining .nav-item and .active helps you distinguish the current page visually while keeping all items styled similarly.

Example 3: Building Layouts with Utility Classes 

<div class="container text-center p-4">
  <h2 class="headline">Welcome!</h2>
  <p class="lead-text">We're glad you're here.</p>
</div>


.container {
  max-width: 600px;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.p-4 {
  padding: 1rem;
}

Utility classes help you keep markup clean and modular, especially in responsive designs.

Learn More About the Class Attribute in CSS

Multiple Classes on One Element

You can apply multiple classes to a single HTML element by separating them with spaces: 

<div class="card shadow large-text"></div>

Each class can contribute different styles: 

.card {
  border: 1px solid #ccc;
  padding: 1rem;
}

.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.large-text {
  font-size: 1.5rem;
}

This approach encourages reusability and clean code.

Class Attribute vs. ID Attribute

The class attribute is reusable. You can apply the same class to many elements. In contrast, the id attribute is meant to be unique within the page. 

<p id="main-intro" class="lead-text"></p>

Use class for styling groups and id for identifying individual elements (like anchors or JavaScript hooks).

In CSS: 

#main-intro {
  font-style: italic;
}

.lead-text {
  font-size: 1.25rem;
}

Chaining and Combining Classes

You can write selectors that combine class names: 

.card.featured {
  border-color: gold;
}

This targets elements that have both card and featured classes. You can also chain selectors: 

.container .card {
  margin-bottom: 20px;
}

This targets .card elements only inside .container.

Class Attribute in JavaScript

JavaScript can manipulate class attributes using the classList API: 

const element = document.querySelector(".alert");
element.classList.add("visible");
element.classList.remove("hidden");
element.classList.toggle("active");

This is helpful for interactive elements like modals, tabs, and dropdowns.

Accessibility and Class Usage

While class attributes don't affect accessibility directly, they play a big role in styling accessible content. For example, you can use them to visually hide elements while keeping them screen-reader accessible: 

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


<label class="sr-only" for="search">Search</label>
<input id="search" type="text" placeholder="Search..." />

CSS Class Attribute in HTML Validation

Classes must follow CSS naming rules. Class names can’t start with a number and should avoid special characters like !, #, or %.

Valid: 

<div class="section-header"></div>

Invalid: 

<div class="123header"></div> <!-- ❌ starts with a number -->

Keep names semantic and descriptive. Instead of naming a class .blue, prefer .info-message, which describes function instead of appearance.

Learn CSS for Free
Start learning now
button icon
To advance beyond this tutorial and learn CSS by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

Company

Careers

Blog

Jobs

Product

Glossary

Code Compilers

Terms of Use

Privacy Policy

Useful

Press Kit

Imprint

Help

Follow us

© 2025 Mimo GmbH