HTML Tutorial

Chapter: 19

HTMLClass

HTML The class Attribute

Using The class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name.
Here we have three <div> elements that points to the same class name:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div.cities
{
     background-color: yellowgreen;
     color: maroon;
     margin: 20px 0 20px 0;
     padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Calcutta</h2>
<p>Calcutta (now Kolkata) was the capital of India during the British Raj until December 1911. Delhi had served as the political and financial centre of several empires of ancient India and the Delhi Sultanate, most notably of the Mughal Empire from 1649 to 1857.</p>
</div>
<div class="cities">
<h2>Mumbai</h2>
<p>Mumbai (also known as Bombay, the official name until 1995) is the capital city of the Indian state of Maharashtra.</p>
</div>
<div class="cities">
<h2>Chennai</h2>
<p>Chennai (formerly known as Madras) is the capital of the Indian state of Tamil Nadu.</p>
</div>
</body>
</html>

Output

Calcutta

Calcutta (now Kolkata) was the capital of India during the British Raj until December 1911. Delhi had served as the political and financial centre of several empires of ancient India and the Delhi Sultanate, most notably of the Mughal Empire from 1649 to 1857.

Mumbai

Mumbai (also known as Bombay, the official name until 1995) is the capital city of the Indian state of Maharashtra.

Chennai

Chennai (formerly known as Madras) is the capital of the Indian state of Tamil Nadu.

Using The class Attribute on Inline Elements

The HTML class attribute can also be used for inline elements:

Example

<!DOCTYPE html>
<html>
<head>
<style>
span.red{
     font-size: 150%;
     color: red;
}
span.blue{
     font-size: 150%;
     color: blue;
}
</style>
</head>
<body>
<h1>This is <span class="red">Red</span> text</h1>
<p>and this is <span class="blue">Blue</span> text</p>
</body>
</html>

Output

This is Red text

and this is Blue text