Skip to main content
Practice

Class

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

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

For example, if you want to display all warning message texts in red on a webpage, you can define a shared CSS class for warning messages as follows.

A class can be defined using a . followed by the class name.

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

All HTML elements with the alert class applied 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 behaviors from all the classes will be applied to the HTML element.

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

By leveraging HTML classes in this way, you can effectively and consistently apply styles and behaviors to various HTML elements on your webpage.

Want to learn more?

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