This attribute is used to apply same set of styles to elements with same class name. This attribute is used to point a class in style sheet. You can apply class to one or more elements as you want.
<html>
<head>
<style>
.student{
background-color: green;
color: white;
font-size:22px;
padding:5px;
}
</style>
</head>
<body>
<div class="student">
<h1>Ali</h1>
<p>passed examination and got first position.</p>
</div>
<div class="student">
<h1>Ahmed</h1>
<p>passed examination and got second position.</p>
</div>
</body>
</html>
passed examination and got first position.
passed examination and got second position.
Different Html tags can use same same class to display content in same style. In example below Heading1 and paragraph tags are using same class.
<style>
.color-white{
background-color: green;
color: white;
padding:5px;
}
</style>
<h1 class="color-white">Ahmed</h1>
<p class="color-white">passed examination and got second position.</p>
passed examination and got second position.
An Html tag can use different classes at the same time. There should be space between each class name.
<style>
.back-color{
background-color: red;
color: white;
padding:5px;
}
.text-color
{
color: white;
}
.font-bold{
font-weight:bolder;
}
</style>
<div class="back-color text-color font-bold">
<h1>Ahmed</h1>
<p>passed examination and got second position.</p>
</div>
passed examination and got second position.