HTML classes are used to assign one or more elements to a common group. Classes are especially useful when you want to apply the same CSS styles to multiple HTML elements or select a group of elements using JavaScript.

For example, if several paragraphs should have the same text color, background, or font size, you can give them the same class name and style them together.

What Is an HTML Class?

An HTML class is a reusable name assigned to an HTML element using the class attribute.

Example

<p class=”intro”>Welcome to Web4Learners.</p>

In this example:

• class is the HTML attribute.
• intro is the class name.
• The class can be used in CSS or JavaScript.

A class can be assigned to almost any HTML element.

Using Classes with CSS

The most common use of HTML classes is applying CSS styles.

In CSS, a class selector starts with a dot . followed by the class name.

Example

<style>
  .intro {
    color: blue;
    font-size: 20px;
  }
</style>

<p class="intro">This is an introduction.</p>
<p>This is a normal paragraph.</p>

Only the paragraph with the intro class receives the specified styles.

Using the Same Class on Multiple Elements

One of the biggest advantages of classes is that the same class can be used on multiple elements.

<style>
  .highlight {
    background-color: yellow;
    color: black;
  }
</style>

<h2 class="highlight">HTML Classes</h2>
<p class="highlight">This paragraph is highlighted.</p>
<div class="highlight">This div is also highlighted.</div>

All three elements use the same highlight class and receive the same CSS styles.

An Element Can Have Multiple Classes

An HTML element can have more than one class. Multiple class names are separated by spaces.

<p class="intro highlight">Welcome to HTML.</p>

Here, the paragraph has two classes:

• intro
• highlight

You can define styles for both classes.

.intro {
  font-size: 20px;
}

.highlight {
  background-color: yellow;
}

The paragraph will receive styles from both classes.

Classes and CSS Selectors

Classes make it easier to organize and reuse CSS.

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

<button class="btn">Click Me</button>
<button class="btn">Learn More</button>

Both buttons use the same .btn class, so they have the same appearance.

HTML Classes with JavaScript

Classes can also be used with JavaScript to find or modify elements.

For example:

<p class="message">Hello World</p>

<script>
  const element = document.querySelector(".message");
  element.textContent = "Welcome to Web4Learners!";
</script>

JavaScript uses .message to select the element with that class.

Class Names Are Case-Sensitive

Class names should be written consistently. For example:

<p class="intro">Hello</p>

and:

.intro {
  color: blue;
}

The CSS selector matches the class name exactly.

It is good practice to use meaningful and readable class names such as:

header
container
button
main-content
highlight
card

HTML Class vs ID

Classes and IDs are both used to identify HTML elements, but they have different purposes.

Feature	Class	ID
Attribute	class	id
Reusable	Yes	Normally unique
CSS selector	.classname	#idname
Multiple elements	Yes	Should normally be one element
Common use	Reusable styles/groups	Unique elements

Example:

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

<p id="special">Special paragraph</p>

The text class can be reused, while the special ID is intended to identify one unique element.

Best Practices for HTML Classes

Use meaningful class names that describe the purpose of the element.

Good:

<div class=”product-card”></div>

Avoid unclear names such as:

<div class=”box1″></div>

Keep class names consistent and use hyphens when they improve readability:

<div class=”main-content”></div>

Also remember that a class does not automatically create a visual style. The class only gives an element a reusable name. CSS or JavaScript must use that class to perform an action.