Horje
How to create HTML Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.


Full Example of HTML Multiple Classes

In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 

.main {
  text-align: center;
}
</style>
</head>
<body>

<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

</body>
</html>

Output should be:

Full Example of HTML Multiple Classes





Related Articles
What is HTML class Attribute HTML class Attribute
How to Use The class Attribute HTML class Attribute
How to use The Syntax For Class HTML class Attribute
How to create HTML Multiple Classes HTML class Attribute
How to create Different Elements Can Share Same Class HTML class Attribute
How to Use of The class Attribute in JavaScript HTML class Attribute

Single Articles
Full Example of HTML Multiple ClassesHTML class Attribute

Read Full:
HTML class Attribute
Category:
Web Tutorial
Sub Category:
HTML class Attribute
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
67


Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_multiple

Share on: