» » 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

Instance Of Java

We will help you in learning.Please leave your comments and suggestions in comment section. if you any doubts please use search box provided right side. Search there for answers thank you.
«
Next
Newer Post
»
Previous
Older Post

No comments

Leave a Reply

Select Menu