Home
›
How to assign multiple classes to one html element
Posted by: InstanceOfJava
Posted date:
Aug 24, 2016
/
- 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 :
- <!DOCTYPE html>
- <html>
-
- <title>Cascading Style Sheet</title>
-
- <style type="text/css">
-
- .class1 {
- text-align: center;
- color: red;
- }
-
- .class2 { font-size: 300%; }
-
- </style>
- </head>
- <body>
- <p > How to assign multiple classes to html element<p>
- <p class="class1">How to assign multiple classes to html element<p>
- <p class="class1 class2">How to assign multiple classes to html element<p>
-
- </body>
- </html>
No comments