HTML class Attribute
The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
In the following example we have three <div> elements with a class attribute with the value of "city". All of the three div elements will be styled equally according to the .city style definition in the head section:
The Syntax for Class
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:
Example:
<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>
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:
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
} </style>
</head>
<body>
<h1> < class="note">Important </span>Heading>/h1>
<p> < class="note">IMPORTANT </span>Heading>/p>
</body>
</html>
Multiple Classes
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g.
In the following example, the first
element belongs to both the city class and also to the main class, and will get the CSS styles
from both of the classes:
Example:
< class="city main"London</h2>
< class="city"New York</h2>
< class="city"Paris</h2>
Example:
< class="city"New York</h2>
< class="city"Paris</h2>
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:
<p class="city"Paris is the capital of France</p>
Use of the class attribute in JavaScript
The class name can also be used by JavaScript to perform certain tasks for specific elements.
JavaScript can access elements with a specific class name with the getElementsByClassName() method:
Example:
Click on a button to hide all elements with the class name "city":
function myfunction() {
var x = document.getElementByClassName ("city");
for (var i=0; i<x.length; i++) { x[i].style.display="none"; }