Skip to main content
Practice

Class

An HTML class is an identifier used to apply common styles and behavior to various HTML elements on a webpage.

By using the same class name for multiple elements, you can style them in a consistent way.

For example, if you want all warning message text on a webpage to appear in red, you can define a common CSS for the warning messages using a class as shown below.

You can define a class by prefixing it with a . as follows:

Defining alert class in CSS
/* Define alert class */
.alert {
  color: red;
}
Applying alert class in HTML
<p class="alert">Alert message 1</p>
<p class="alert">Alert message 2</p>

All HTML elements with the alert class will have their text color changed to red.

A single HTML element can have multiple classes.

Each class is separated by a space, and the styles and behavior associated with multiple classes are jointly applied to the respective HTML element.

Applying multiple classes in HTML
<p class="alert large-text">Large alert message</p>

By using HTML class in this way, you can effectively apply consistent styles and behavior to various HTML elements across a webpage.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.