Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Using more than one 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: 02-Sep-2022
125 Views
Advertisements