Using Multiple CSS Classes for an Element in HTML

To create CSS more quickly, we can give a single HTML element numerous classes and style each class separately. This method allows us to manage style application redundancy. We can apply the universal styles to many classes and the particular class-specific styles.

Syntax

<tag_name class="class_1 class_2">

Example

In the following example we are using the style of class"Varma" to both of the paragraphs while the style of secondclass varma1 is applied to second paragraph.


<!DOCTYPE html>
<html>
   <style>
      .varma {
         font-size: larger;
         margin-bottom: 35px;
         background-color: lightgreen;
      }
      .varma1 {
         color: red;
      }
   </style>
<body>
   <p class="varma">
      Hello Everyone.
   </p>
   <p class="varma varma1">
      Welcome to Turorialspoint.
   </p>
</body>
</html>

On executing, the above script will generate the result. It is the text "welcome to tutorialspoint" combined with two CSS styles and the text "hello everyone" with singke css.

Example: Using javascript

In the following example we are adding two style to an single text by declaring the .bg-blue style and .text-white style.


<!DOCTYPE html>
<html>
   <style>
      .bg-blue {
         background-color: lightgreen;
      }
      .text-white {
         color: red;
      }
   </style>
<body>
   <div id="varma">Welcome To Tutorialspoint</div>
   <script>
      const box = document.getElementById('varma');
      box.classList.add('bg-blue', 'text-white');
   </script>
</body>
</html>

At the time of execution, the script generate a output of text"welcome to tutorialspoint"applied with two css.

Updated on: 2022-09-02T11:13:26+05:30

174 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements