How to apply styles to multiple classes at once?-CSS Tutorial-php.cn

How to apply styles to multiple classes at once?

王林

Release： 2023-08-19 09:33:16

forward

982 people have browsed it

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 (,).

"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>

Copy after login

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>

Copy after login

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!