Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to apply styles to multiple classes at once?
In CSS, you can apply the same styles to multiple classes simultaneously using the class selector (.) and comma separator (,). This technique allows you to write efficient CSS by grouping classes that share common styling properties.
A "class" is an HTML attribute that accepts a list of classes separated by spaces. These classes can then be used in CSS to style particular elements or in JavaScript to manipulate HTML elements.
Syntax
.class1, .class2, .class3 {
property: value;
}
Example 1: Applying Color to Multiple Classes
In this example, we will apply the font color "red" to HTML elements that have classes "header" and "para"
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply styles to multiple classes at once?</title>
<style>
.header, .para {
color: red;
}
</style>
</head>
<body>
<h3 class="header">How to apply styles to multiple classes at once?</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
The heading and paragraph text both appear in red color.
Example 2: Applying Multiple Properties
In this example, we will apply both font color "green" and font style "italic" to HTML elements that have classes "header" and "para"
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply styles to multiple classes at once?</title>
<style>
.header, .para {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<h3 class="header">How to apply styles to multiple classes at once?</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
The heading and paragraph text both appear in green color with italic styling.
Conclusion
Using multiple class selectors separated by commas allows you to apply the same styles to different classes efficiently. This approach reduces code repetition and makes your CSS more maintainable.
3K+ Views
