What is HTML class Attribute ?
The HTML class attribute is used to set the same style or designs for the same class name elements. Therefore each HTML element with the same class attribute has the same format and style.
Here are three elements <div> which point to the name of the same class:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Dehradun</h2>
<p>Dehradun is the capital of the Indian state of Uttarakhand.</p>
</div>
<div class="cities">
<h2>Pauri Garhwal</h2>
<p>District Pauri or Pauri Garhwal is situated in the state of Uttarakhand in Northern India.</p>
</div>
<div class="cities">
<h2>Kumaon</h2>
<p>Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.</p>
</div>
</body>
</html>
Output:
Dehradun
Dehradun is the capital of the Indian state of Uttarakhand.
Pauri Garhwal
District Pauri or Pauri Garhwal is situated in the state of Uttarakhand in Northern India.
Kumaon
Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.
The class Attribute on Inline Elements
We can also use the HTML class attribute for inline elements
Example:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>This is <span class="note">Important</span> Heading1</h1>
<p>This is some <span class="note">important</span> paragraph.</p>
</body>
</html>
Output:
This is Important Heading1
This is some important paragraph.
Select Elements With a Specific Class
In CSS, a period(.) character will be used to select elements for a particular class, followed by the class name:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.division {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "division":</p>
<h2 class="division">Pauri Garhwal</h2>
<p>District Pauri or Pauri Garhwal is situated in the state of Uttarakhand in Northern India.</p>
<h2 class="division">Kumaon</h2>
<p>Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.</p>
</body>
</html>
Output:
The class Attribute
Use CSS to style elements with the class name "division":
Pauri Garhwal
District Pauri or Pauri Garhwal is situated in the state of Uttarakhand in Northern India.
Kumaon
Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.
Multiple Classes
HTML elements may have more than one class name, and space shall separate each class name.
Example:
<!DOCTYPE html>
<html>
<style>
.division {
background-color: tomato;
color: white;
padding: 10px;
}
.capital {
text-align: center;
}
</style>
<body>
<h2>Multiple Classes</h2>
<p>All three headers have the class name "division". In addition, London also have the class name "Dehradun", which center-aligns the text.</p>
<h2 class="division capital">Dehradun</h2>
<h2 class="division">Kumaon</h2>
<h2 class="division">Pauri Garhwal</h2>
</body>
</html>
Output:
Multiple Classes
All three headers have the class name "division". In addition, London also have the class name "Dehradun", which center-aligns the text.
Dehradun
Kumaon
Pauri Garhwal
Share Same Class For Different Tags
The same class name may be used for different tags such as <h2> or <p>, so that they have the same style:
Example:
<!DOCTYPE html>
<html>
<style>
.city {
background-color: green;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class, Different Tag</h2>
<p>Even if the two elements don't have the same tag, the same class name is possible and the same style is applied</p>
<h2 class="city">Kumaon</h2>
<p class="city">Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.</p>
</body>
</html>
Output:
Same Class, Different Tag
Even if the two elements don't have the same tag, the same class name is possible and the same style is applied
Kumaon
Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.
Class Attribute in JavaScript
JavaScript may also utilize the class name to perform certain tasks for the elements with the class name specified. By using the getElementsByClassName() method, JavaScript can access elements with the specified class name:
Example:
Hide all elements of the class name "city" if a user clicks on a button:
<!DOCTYPE html>
<html>
<body>
<h2>Using The class Attribute in JavaScript</h2>
<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">Dehradun</h2>
<p>Dehradun is the capital of the Indian state of Uttarakhand.</p>
<h2 class="city">Pauri Garhwal</h2>
<p>District Pauri or Pauri Garhwal is situated in the state of Uttarakhand in Northern India.</p>
<h2 class="city">Kumaon</h2>
<p>Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Output:
Using The class Attribute in JavaScript
Click the button, to hide all elements with the class name "city", with JavaScript:
Dehradun
Dehradun is the capital of the Indian state of Uttarakhand.
Pauri Garhwal
District Pauri or Pauri Garhwal is situated in the state of Uttarakhand in Northern India.
Kumaon
Kumaon or Kumaun is one of the two regions and administrative divisions of the Indian state of Uttarakhand.