The Class Attribute
Class attribute is used to assign the same style for different elements. This is done by declaring the same class name with for all the elements.
Below is the example of three different <div> elements having same class name.
Syntax
<!DOCTYPE html>
<html>
<head>
<style>
div.country {
background-color: blue
color: white;
margin: 10px 0 10px 0;
padding: 15px;
}
</style>
</head>
<body>
<div class=”country”>
<h2>India</h2>
<p>
One-third the area of the United States, the Republic of India occupies most of the subcontinent of India in southern Asia. It borders on China in the northeast. </p>
</div>
<div class=”country”>
<h2>Brazil</h2>
<p>
Brazil covers nearly half of South America and is the continent's largest nation. It extends 2,965 mi (4,772 km) north-south, 2,691 mi (4,331 km) east-west, and borders every nation on the continent.
</p>
</div>
<div class=”country”>
<h2>Japan</h2>
<p>
An archipelago in the Pacific, Japan is separated from the east coast of Asia by the Sea of Japan.</p>
</div>
</body>
</html>
Here, all the elements will execute the output in same formatting style.
Class Attribute on Inline Elements
HTML class attributes are also used for inline elements.
Syntax
<!DOCTYPE html>
<html>
<head>
<style>
span.car {
font-size: 150%;
color: blue;
}
</style>
</head>
<body>
<h1>
Technology Diving
<span class=”car”>Exploring </span>
In-Depth
</h1>
<p>This is just a
<span class=”car”>simple</span>
text. </p>
</body>
</html>