How to apply styles to multiple classes at once ?

Last Updated : 14 Dec, 2022

In this article, we will learn about how can we apply styles to multiple classes at once. You can apply the same style to different classes at once in 2 different ways and we are going to see these two things with examples.

Approach 1: In this approach, we are going to have multiple CSS declarations for the same properties by separating them with commas.

Syntax:

.class_A , .class_B{
    /*property*/
}

Example 1:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            background-color: black;
            color: white;
        }
 
        .abc,
        .xyz {
            color: green;
            font-size: 50px;
        }
    </style>
 
</head>
 
<body>
    <center>
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>How can I apply styles to multiple classes at once ?</h3>
 
        <div class="abc">GeeksforGeeks</div>
        <div class="xyz">GeeksforGeeks</div>
 
    </center>
</body>
 
</html>

Output:

Approach 2: In this approach, we are going to have the element name with the class name joined by the dot(.) class selector.

Syntax:

element_name.class_Name, element_name.class_Name, element_name.class_Name, {
    /*property*/
}

Note: This approach is mostly used to apply different CSS styles when the same class name is available in the different elements.

Example 2:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            background-color: black;
            color: white;
        }
 
        div.abc,
        div.xyz {
            color: green;
            font-size: 50px;
        }
    </style>
 
</head>
 
<body>
    <center>
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>How can I apply styles to multiple classes at once ?</h3>
 
        <div class="abc">GeeksforGeeks</div>
        <div class="xyz">GeeksforGeeks</div>
 
    </center>
</body>
 
</html>