In this section, we will learn what the class attribute is and how to use it in HTML.

Classes in HTML

In HTML documents, you can classify the elements that are being used and thus apply a change to the entire elements that belong to a specific class! For example, you can classify the elements into two groups like red and blue and then set a red border color for those elements that belong to the red class and also set a blue border color for those elements that belong to the blue class.

This classification can be done using an attribute called `class`. This attribute is general (AKA global) and so could be applied to any HTML element in a document.

Alright, now let’s move on to the syntax part of this attribute and see what type of values we can put for the attribute.

HTML Class Syntax:

<element-name class = “value value2 value3”> </element-name>

Here, you can see that the class attribute is not limited to just one value! In fact, you can put multiple values for this attribute and separate them using a white space.

We mentioned that the value of the class attribute represents a class category! For example, if you put the value red as the value of this attribute, that means there’s a class named `red` and currently it has one member! If you continue to set other elements with the value red for their class attribute, then this class will gain more and more members. But, sometime we might have an element that belongs to more than just one class! This is where we can put more than one value as the argument to this attribute! So by adding multiple values to the class attribute, the target element becomes part of multiple classes and so any change we apply to those classes, this element will take effect from those classes as well.

Example: add class to HTML

See the Pen add class to HTML by Omid Dehghan (@odchan1) on CodePen.

Note that the paragraphs in this example currently belong to the class red, but we didn’t apply any style or change using the name of the class yet to see the effect of using classes. So now let’s move on and use CSS to access the class red and apply the red border style on every element that has the value red set for its class attribute.

Example: CSS style for class

See the Pen CSS style for class by Omid Dehghan (@odchan1) on CodePen.

Note: you can learn more about the CSS selectors and the way we’ve accessed the elements with a specific value set for the class attribute in the CSS sections.

HTML Class with Multiple Values

As mentioned before, a class can have multiple values, each separated with a white space!

In that case, the target element will be part of multiple classes. This means any style or change we apply to the target class; this element will take effect as well.

Alright, now let’s see how we can add multiple values to the class attribute and use it to style elements using CSS.

Example: html class with multiple values

See the Pen html class with multiple values by Omid Dehghan (@odchan1) on CodePen.

In this example, the two paragraphs have the `red` value as the value of the class attribute. But also we can see each of the paragraphs has another value for their class attributes! The first one has the value bluefont and the second one has the value greenfont.

Now with this second value for the class attribute in each element, we’ve used CSS and changed the text color of those elements that have the bluefont to blue and the text color of those elements that have the greencolor to green.

Example: div class in HTML

See the Pen div class in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML Class Attribute and JavaScript

The use of class attribute could also be useful when it comes to languages like JavaScript.

Basically, in JavaScript there are functions that we can use to access the entire elements of an HTML document that belong to a specific class, for example. Now, by gaining access to a collection of elements in this language, we can apply a change to all of those elements programmatically.

Note: please check the JavaScript programming section if you’re not familiar with this language.

Example: using HTML class attribute in JavaScript

See the Pen using HTML class attribute in JavaScript by Omid Dehghan (@odchan1) on CodePen.