How to assign multiple classes to one html element

  • In HTML if we want to apply any styles to any elements we will use cascading style sheets.
  • By using CSS we can apply styles to an element in HTML
  • If some style is needed for more than one type of element then we cant make a style and name it and where ever that style is required we can place that style for that element.

  • So like this it is always possible to apply multiple styles or multiple classes to HTML elements.
  • We can specify more than one CSS class to an element.
  • By using class attribute we can specify multiple  CSS classes to a single element and all classes must be separated by a space.
  • For example if we are applying multiple classes to a div tag.
  • <div class="class1 class2"></div>
  • Here class is the attribute and class1 and class2 are the two different CSS classes.
  • Lets take an example of one paragraph element and two css classes 
  • Fist we define a <p> element with no styles.
  • Second one more <p> element with one style
  • Third one more <p> element with two styles.  
  • HTML multiple classes

 

#1: Html example file to show how to assign multiple CSS classes to an HTML element :

 

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <title>Cascading Style Sheet</title>
  5.  
  6. <style type="text/css">
  7.  
  8. .class1 {  
  9. text-align: center;
  10. color: red; 
  11. }
  12.  
  13. .class2 { font-size: 300%; }
  14.  
  15. </style>
  16. </head>
  17. <body>
  18. <p >   How to assign multiple classes to html element<p>
  19. <p class="class1">How to assign multiple classes to html element<p>
  20. <p class="class1 class2">How to assign multiple classes to html element<p>
  21.  
  22. </body>
  23. </html>


html multiple classes
Select Menu