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

CSS with Class: HTML class Attribute Definition and Usage

In HTML, most of the times we have elements that run the same type of task.

For example, input fields like textbox and password box are used to take input from users! So somehow we can say these fields belong to the same class.

Or buttons in a document might have the same situation. For example, you might have multiple forms in your webpage and a submit button for each one of those forms. So here we can also say, all the submit buttons in the document belong to the same class.

Classifying elements in an HTML document basically helps us to manage these elements in a better way! For example, you can say, every element that belongs to the class A should have a background color of red! Or every element that belongs to the class B should have the font size of 40px, etc.

As you can see, we can manage the elements when they are classified a lot easier than working individually with each element in a document (especially if that document has tons of elements in it).

Now the question is, how can we classify elements in an HTML document?

This is where the class attribute comes in!

First of all, this attribute is applicable to all HTML elements!

The class attribute takes a value which is known as a “class-name”.

So if in an HTML document, there are multiple elements and we want to group them in the same class, all we need to do is to use the `class` attribute in those elements and set the same name for each class attribute. That way, all the elements will be grouped in the same class.

Basically, when we say a set of elements in an HTML document belong to the same class, that means all of them have the class attribute with the same value assigned to it.

The value of a class attribute is accessible in other languages like JavaScript and CSS and via this value, we can apply a change and this modification will be applied to the entire elements that have such value for their class attribute.

HTML class Attribute Syntax

<element class = “value/s”>

HTML class Attribute Values

The value we set for the class attribute is one or more names (space separated) that represent a class or multiple classes which we want the target element to be in that class/es

Example: HTML div class

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

How to Use Classes in HTML?

In the last example, there are 4 <div> elements. The first and third <div> elements have the class “a” assigned to them and so basically these two elements are now grouped in the same class.

Also, the second and fourth <div> elements are classified together by having the value “b” for their class attribute.

Now with the help of CSS, we’ve applied a lightblue color to the background of those elements that belong to the class “a”. And also applied a lightseagreen color to the background of those elements that belong to the class “b”.

Example: CSS for Class

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

Multiple Classes in HTML

The class attribute can take multiple values as well (each separated by space). This is useful when we want an element to be in multiple different classes.

For example, let’s say you have two classes A and B. Now those elements that are in the class A will have a big font size (48px for example) and those elements that belong to the class B will have a background color of lightblue.

Now you might have an element in the same document that needs a big font as well as the background color of lightblue! This is easily possible and all we need to do is to just add the name of both classes as the value for the `class` attribute. Here, because the target element is part of both classes, it will get both styles from A and B.

Example: multiple classes in HTML

See the Pen multiple classes in HTML by Omid Dehghan (@odchan1) on CodePen.

In this example, the last <div> element belongs to both “a” and “b” classes and hence it has the font size of 48px (set for the class “a”) as well as the lightblue color for its background (set for the class “b”).