The class Attribute

The `class` Attribute

Global Attribute

The class attribute assigns one or more class names to an HTML element. Unlike the id attribute, the same class can be applied to multiple elements, making it the primary way to style groups of elements with CSS.

Syntax

<!-- Single class -->
<element class="classname">Content</element>

<!-- Multiple classes (space-separated) -->
<element class="class1 class2 class3">Content</element>

Values

Value	Description
`classname`	One or more space-separated class names. Case-sensitive.

Examples

Basic Usage

<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight">So is this one!</p>
<p>This one is not.</p>

<style>
.highlight {
  background-color: #fef3c7;
  padding: 12px;
  border-left: 4px solid #f59e0b;
  margin: 8px 0;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight">So is this one!</p>
<p>This one is not.</p>

<style>
.highlight {
  background-color: #fef3c7;
  padding: 12px;
  border-left: 4px solid #f59e0b;
  margin: 8px 0;
}
</style>

Multiple Classes

<button class="btn">Regular Button</button>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-primary btn-large">Large Primary</button>

<style>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin: 5px;
}
.btn-primary {
  background: #2563eb;
  color: white;
}
.btn-danger {
  background: #dc2626;
  color: white;
}
.btn-large {
  padding: 15px 30px;
  font-size: 16px;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<button class="btn">Regular Button</button>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-primary btn-large">Large Primary</button>

<style>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin: 5px;
}
.btn-primary {
  background: #2563eb;
  color: white;
}
.btn-danger {
  background: #dc2626;
  color: white;
}
.btn-large {
  padding: 15px 30px;
  font-size: 16px;
}
</style>

Card Components

<div class="card">
<h3 class="card-title">Basic Card</h3>
<p class="card-text">Standard card with default styling.</p>
</div>

<div class="card card-featured">
<h3 class="card-title">Featured Card</h3>
<p class="card-text">This card stands out from the rest!</p>
</div>

<style>
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin: 10px 0;
  background: white;
}
.card-featured {
  border: 2px solid #3b82f6;
  background: linear-gradient(to right, #dbeafe, #eff6ff);
}
.card-title {
  margin: 0 0 10px 0;
  color: #1e293b;
}
.card-text {
  margin: 0;
  color: #64748b;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="card">
<h3 class="card-title">Basic Card</h3>
<p class="card-text">Standard card with default styling.</p>
</div>

<div class="card card-featured">
<h3 class="card-title">Featured Card</h3>
<p class="card-text">This card stands out from the rest!</p>
</div>

<style>
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin: 10px 0;
  background: white;
}
.card-featured {
  border: 2px solid #3b82f6;
  background: linear-gradient(to right, #dbeafe, #eff6ff);
}
.card-title {
  margin: 0 0 10px 0;
  color: #1e293b;
}
.card-text {
  margin: 0;
  color: #64748b;
}
</style>

Utility Classes

<div class="container">
<p class="text-center text-large text-bold">
  Centered, Large, Bold Text
</p>
<p class="text-muted text-small">
  Muted, Small Text
</p>
<div class="bg-primary text-white padding-20 margin-top-10">
  Primary Background with White Text
</div>
</div>

<style>
.text-center { text-align: center; }
.text-large { font-size: 1.5em; }
.text-small { font-size: 0.875em; }
.text-bold { font-weight: 700; }
.text-muted { color: #94a3b8; }
.text-white { color: white; }
.bg-primary { background: #2563eb; }
.padding-20 { padding: 20px; }
.margin-top-10 { margin-top: 10px; }
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="container">
<p class="text-center text-large text-bold">
  Centered, Large, Bold Text
</p>
<p class="text-muted text-small">
  Muted, Small Text
</p>
<div class="bg-primary text-white padding-20 margin-top-10">
  Primary Background with White Text
</div>
</div>

<style>
.text-center { text-align: center; }
.text-large { font-size: 1.5em; }
.text-small { font-size: 0.875em; }
.text-bold { font-weight: 700; }
.text-muted { color: #94a3b8; }
.text-white { color: white; }
.bg-primary { background: #2563eb; }
.padding-20 { padding: 20px; }
.margin-top-10 { margin-top: 10px; }
</style>

Class Naming Conventions

BEM (Block Element Modifier)

BEM is a popular methodology for naming CSS classes:

<div class="search-form">
<input class="search-form__input" type="text" placeholder="Search...">
<button class="search-form__button search-form__button--primary">
  Search
</button>
</div>

<style>
.search-form {
  display: flex;
  gap: 8px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
}
.search-form__input {
  flex: 1;
  padding: 10px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
}
.search-form__button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.search-form__button--primary {
  background: #2563eb;
  color: white;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="search-form">
<input class="search-form__input" type="text" placeholder="Search...">
<button class="search-form__button search-form__button--primary">
  Search
</button>
</div>

<style>
.search-form {
  display: flex;
  gap: 8px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
}
.search-form__input {
  flex: 1;
  padding: 10px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
}
.search-form__button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.search-form__button--primary {
  background: #2563eb;
  color: white;
}
</style>

BEM Structure:

Block: search-form - Standalone component
Element: search-form__input - Part of the block
Modifier: search-form__button--primary - Variant of element

Utility-First (Tailwind-style)

Modern utility-first approaches use many small, single-purpose classes:

<div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg shadow-md">
  <h2 class="text-2xl font-bold">Title</h2>
  <button class="px-4 py-2 bg-white text-blue-500 rounded hover:bg-gray-100">
    Action
  </button>
</div>

Semantic Naming

Use names that describe purpose, not appearance:

<!-- Good - describes purpose -->
<div class="warning-message"></div>
<button class="submit-button"></button>

<!-- Avoid - describes appearance (can change) -->
<div class="red-box"></div>
<button class="blue-button"></button>

JavaScript classList API

The classList API provides methods to manipulate classes dynamically:

<div id="box" class="box">Interactive Box</div>
<button onclick="toggleClass()">Toggle Active</button>
<button onclick="addClass()">Add Highlight</button>
<button onclick="removeClass()">Remove Highlight</button>

<script>
const box = document.getElementById('box');

function toggleClass() {
  box.classList.toggle('active');
}

function addClass() {
  box.classList.add('highlight');
}

function removeClass() {
  box.classList.remove('highlight');
}
</script>

<style>
.box {
  padding: 30px;
  margin: 15px 0;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  text-align: center;
  transition: all 0.3s;
}
.box.active {
  background: #dbeafe;
  border-color: #2563eb;
  transform: scale(1.05);
}
.box.highlight {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div id="box" class="box">Interactive Box</div>
<button onclick="toggleClass()">Toggle Active</button>
<button onclick="addClass()">Add Highlight</button>
<button onclick="removeClass()">Remove Highlight</button>

<script>
const box = document.getElementById('box');

function toggleClass() {
  box.classList.toggle('active');
}

function addClass() {
  box.classList.add('highlight');
}

function removeClass() {
  box.classList.remove('highlight');
}
</script>

<style>
.box {
  padding: 30px;
  margin: 15px 0;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  text-align: center;
  transition: all 0.3s;
}
.box.active {
  background: #dbeafe;
  border-color: #2563eb;
  transform: scale(1.05);
}
.box.highlight {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}
</style>

Common classList Methods

// Check if class exists
element.classList.contains('active'); // true or false

// Add one or more classes
element.classList.add('active', 'highlight');

// Remove one or more classes
element.classList.remove('active', 'highlight');

// Toggle class (add if absent, remove if present)
element.classList.toggle('active');

// Replace one class with another
element.classList.replace('old-class', 'new-class');

Best Practices

Use Classes for Styling, IDs for JavaScript

<!-- Recommended approach -->
<button id="submit-btn" class="btn btn-primary">Submit</button>

<style>
  /* Style with classes */
  .btn { padding: 10px 20px; }
  .btn-primary { background: blue; }
</style>

<script>
  // Target with ID
  document.getElementById('submit-btn').addEventListener('click', ...);
</script>

Keep Class Names Lowercase

<!-- Good -->
<div class="user-profile"></div>

<!-- Avoid mixed case (harder to remember) -->
<div class="UserProfile"></div>
<div class="userProfile"></div>

Avoid Overly Specific Classes

<!-- Too specific - hard to reuse -->
<div class="homepage-hero-section-title-text-blue"></div>

<!-- Better - reusable components -->
<div class="hero-title text-primary"></div>

<!-- Organized and readable -->
<div class="card card-large card-shadow
            flex flex-column gap-4
            text-center">
  Content
</div>

Performance Considerations

Class Selector Performance

Class selectors (.classname) are very fast in modern browsers:

/* Fast - simple class selector */
.button { }

/* Slower - complex descendant selector */
.container .sidebar .widget .button { }

/* Fast - use multiple classes instead */
.widget-button { }

Reusing Classes

Reusing classes reduces CSS file size and improves maintainability:

/* Instead of this: */
.header-button { padding: 10px 20px; background: blue; }
.sidebar-button { padding: 10px 20px; background: blue; }
.footer-button { padding: 10px 20px; background: blue; }

/* Do this: */
.btn { padding: 10px 20px; background: blue; }

Accessibility Considerations

Classes themselves don’t affect accessibility, but they enable important styling:

<!-- Use classes to visually hide elements while keeping them accessible -->
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
</style>

<button>
  <span class="visually-hidden">Search</span>
  <svg><!-- Search icon --></svg>
</button>

Browser Support

The class attribute is supported by all browsers.

Browser	Support
Chrome	All versions
Firefox	All versions
Safari	All versions
Edge	All versions

id - Unique identifier for a single element
style - Inline CSS styles
data-* - Custom data attributes

The class Attribute

The class Attribute

Syntax

Values

Examples

Basic Usage

Multiple Classes

Card Components

Utility Classes

Class Naming Conventions

BEM (Block Element Modifier)

Utility-First (Tailwind-style)

Semantic Naming

JavaScript classList API

Common classList Methods

Best Practices

Use Classes for Styling, IDs for JavaScript

Keep Class Names Lowercase

Avoid Overly Specific Classes

Group Related Classes

Performance Considerations

Class Selector Performance

Reusing Classes

Accessibility Considerations

Browser Support

Related Attributes

Specifications

The `class` Attribute