Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to apply styles to multiple classes at once?
For Applying Styles to Muitliple classes at once we are going to use dot(.) selector and comma(,). In this article, we will use the dot (.) selector and select all the elements with their class names using the selector and separated by a comma (,).
A “class” is an HTML attribute that accepts a list of classes separated by space. These classes can then be used in CSS to style the particular elements, or in javascript to manipulate those HTML elements.
Example 1
In this example, we will apply the font color “red” to the HTML elements that have classes “header” and “para”. We will achieve this using the dot (.) selector and concatenating them with a comma (,).
<!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>
Example 2
In this example, we will apply the font color “green” and font style “italic” to the HTML elements that have classes “header” and “para”. We will achieve this using the dot (.) selector and concatenating them with a comma (,).
<!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>
<h3class="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>
Conclusion
In this article, we learned how to apply multiple CSS classes at once. We did this by first, selecting multiple classes at once, using the dot (.) selector provided by the CSS, and then assigning them the required styles in the stylesheet.
2K+ Views
