How to apply CSS styles to multiple classes at once
How to Apply CSS Styles to Multiple Classes at Once
To apply styles to multiple classes at once, we will use the dot (.) selector and the comma (,). In this article, we will use the dot (.) selector to select all element classes separated by commas (,).
“class” is an HTML attribute that accepts a space-delimited list of classes. These classes can then be used in CSS to style specific elements or manipulate those HTML elements in JavaScript.
Example 1
In this example, we will apply the font color “red” to HTML elements with the classes “header” and “paragraph”. We will achieve this by 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 the font style “italic” to a class with “title” and “paragraph” classes on the HTML elements. We’ll use the dot (.) selector to achieve this and connect 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>
Summary
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 CSS, and then assigning the desired styles to them in the style sheet.