Multiple Classes in HTML
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g. <div class=”game main”>. The element will be styled according to all the classes specified.
In the following example, the first <h2> element belongs to both the game class and also to the main class, and will get the CSS styles from both of the classes:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.game {
background-color: hsl(9, 85%, 43%);
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "game" class. In addition, koko also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="game main">koko</h2>
<h2 class="game">kabaddi</h2>
<h2 class="game">throw ball</h2>
</body>
</html>
Different Elements Can Share Same Class
Different HTML elements can point to the same class name.
In the following example, both <h2> and <p> point to the "city" class and will share the same style:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.game {
background-color: hsl(119, 82%, 44%);
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Different Elements Can Share Same Class</h2>
<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>
<h2 class="game">koko</h2>
<p class="game">koko is the game that is played during school competition</p>
</body>
</html>
No comments:
Post a Comment