HTML Tutorial
HTML Forms
HTML Graphics
HTML Media
HTML API
HTML Class Attributes
The HTML class attribute specifies a class for an HTML element.
The same class can be shared among multiple HTML elements.
Using The class Attribute
The class attribute is often used to specify the class name in a style sheet. It enables JavaScript to access and manipulate elements with a specific class name.
In the below example there are three <div> elements with a class attribute with the value of “city”. All of the three <div> elements are styled equally in accordance to the .city style definition in the head section:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class=”city”>
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class=”city”>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class=”city”>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Output:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
In the following example we have two <span> elements with a class attribute with the value of “note”. Both <span> elements will be styled equally according to the .note style definition in the head section:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class=”note”>Important</span> Heading</h1>
<p>This is some <span class=”note”>important</span> text.</p>
</body>
</html>
Output:
My Important Heading
This is some important text.