To create CSS faster, we can assign multiple classes to a single HTML element and style each class separately. This approach allows us to manage redundancy in style application. We can apply common styles to many classes and category-specific styles to specific categories.
<tag_name class="class_1 class_2">
In the following example, we use the style of class "Varma" to apply to two paragraphs, and the second paragraph has the style of secondclass varma1 applied.
<!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>
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>
The above is the detailed content of Using multiple CSS classes for one element in HTML. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
