How to apply styles to multiple classes at once ?
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> |
Output:
Please Login to comment...