Using the class Attribute in HTML

The class attribute lets you group HTML elements and assign specific styles or behaviors to them. It's essential for using CSS and JavaScript effectively.

What Is the class Attribute?

A class is a name you assign to an element. Based on this name, the element can be associated with one or more styles or functions. You can reference it in your CSS or JavaScript code.

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

Applying class to Multiple Elements

The class attribute allows you to assign the same style or behavior to multiple similar elements — for example, to give several boxes the same appearance.

<div class="card">
  <h2 class="card-title">Product Title</h2>
  <p class="card-description">Short product description.</p>
</div>

Using Multiple Classes on One Element

You can assign multiple classes to a single HTML element by separating them with spaces. This way, a paragraph can be both red and bold, for instance.

<p class="text-bold text-red">Important message</p>

Reusability

The class attribute is reusable — you can apply it to many elements without repeating styles manually, which makes your code more efficient and consistent.

Naming Classes

Use meaningful, clear names for classes, like .nav-bar or .card-title. Avoid vague or overly generic names.

<div class="navigation-bar">
  <a class="nav-item" href="#">Home</a>
  <a class="nav-item" href="#">About</a>
</div>

Connection Between class and CSS

The main purpose of the class attribute is to link HTML with CSS. If a class name matches one defined in the CSS file, the element will automatically adopt the defined styles.

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

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

Combining Multiple Classes

When you assign multiple classes to an element, it inherits styles from all of them. For example, a button can be large, colorful, and bordered — each class adds a different styling rule.

<style>
  .btn {
    padding: 10px;
  }
  .btn-primary {
    background-color: blue;
    color: white;
  }
</style>

<button class="btn btn-primary">Click me</button>

BEM Naming Convention

BEM (Block Element Modifier) is a popular naming convention for class names that promotes clarity and reusability. For example: card__title or card--featured. The double underscore is for elements, the double dash for modifiers.

<div class="card card--featured">
  <h2 class="card__title">Article Title</h2>
  <p class="card__text">Some text here.</p>
</div>

Tips for Using class

Avoid long or confusing class names. Stick to consistent naming (like kebab-case), and don’t use CSS reserved words. Think reusability — a well-named class can be applied across many components.

Modifying class Dynamically with JavaScript

You can modify the class attribute using JavaScript. The classList object lets you add, remove, or check for classes on an element dynamically.

<script>
  document.querySelector("p").classList.add("new-style");
</script>