Home > Article > Web Front-end > How to apply styles to multiple classes at once?
How to apply styles to multiple classes at once?
- 王林forward
- 2023-08-19 09:33:161002browse
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 (,).
"class" is an HTML attribute that accepts a space-separated list of classes. These classes can be used in CSS to style specific elements, or in javascript to manipulate these 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 to "green" and the font style to "italic" to HTML elements with class names "header" and "para". We will use dot (.) selectors and concatenate them with commas (,) to achieve this.
<!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>
in 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.
The above is the detailed content of How to apply styles to multiple classes at once?. For more information, please follow other related articles on the PHP Chinese website!