Using more than one CSS classes for an element in HTML

Front End Technology HTML Web Development

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>