How to Create Multiple Classes in HTML

1. Assign Multiple Classes to a Container in HTML
2. Assign Multiple Class to a Container in HTML to Write Efficient CSS

This article will introduce how to create multiple classes in HTML. The article will discuss the benefits of using multiple classes in HTML.

Assign Multiple Classes to a Container in HTML

In HTML, we have often seen one class assigned to a container. We can assign a class in the HTML elements with the class attribute and then write the value. We can create a class in block-level and inline elements. We can create classes for the different HTML tags like <img>, <p>, <h1> and many more. Generally, we can create a container and assign it with a class, and style the container with CSS. We can select the container class with the . CSS selector. Let’s see an example of it.

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

We have created a div element with a class box in the example above. We have some contents inside the div. In CSS, we selected the box class and applied some styles to it. We created a box with some height and width. It has a black border.

We can also assign two classes to a container in HTML. For that, we should write the two names of the classes, one after the other separated by whitespace. Then, we can style the classes containing the same container individually.

For example, create a div as shown in the example above. Write the two classes box and wrapper separated by whitespace for the div. In CSS, select the box class first and write the border property. Give the value as 2px solid black for the border property. Then, give the height and width of 200px. Next, select the wrapper class and give the value of 20px to the margin property.

We added a margin of 20px to the container using two classes in the example below.

Example Code:

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

Assign Multiple Class to a Container in HTML to Write Efficient CSS

We learned how we could use multiple classes in a container. Now, we need to understand the benefit of following this approach. We can use multiple classes in a container when some classes have identical attributes. We can style the common classes once and style the individual classes separately. Thus, we can write the CSS efficiently.

For example, create three div elements in HTML. For each of the elements, write box as the first class name. Then, write the class names redBox for the first div, greenBox for the second, and blueBox for the third div. Next, in CSS, select the box class and provide the height and width of 200px. Set the margin of 20px. Now, select the individual class name and provide the respective background color. Select the class redBox and set the background-color property to red. Repeat the same for the remaining classes with the respective colours as the background color.

In the example below, we identified the common attributes of these three boxes and created a common class box. Due to this, we need not write the repetitive styles for each of the boxes. We also assigned the containers with the individual classes, through which we can style the boxes with unique colors. In this way, we can use multiple classes to write efficient CSS codes.

Example Code:

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}