The class is an attribute that specifies one or more class names for an HTML element.
The class attribute can be used on any HTML element.
The HTML class attribute is used to define equal styles for elements with the same class name.
So, all HTML elements with the same class attribute will get the same style.
Here we have three <div> elements that point to the same class name:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: #e9c46a;
color: #264653;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h4>London</h4>
<p>London is the capital of the United Kingdom.</p>
</div>
<div class="cities">
<h4>Brussels</h4>
<p>Brussels is the capital of Belgium.</p>
</div>
<div class="cities">
<h4>Bangkok</h4>
<p>Bangkok is the capital of Thailand.</p>
</div>
</body>
</html>Output:
London
London is the capital of the United Kingdom.
Brussels
Brussels is the capital of Belgium.
Bangkok
Bangkok is the capital of Thailand.
The HTML class attribute can also be used on inline elements:
<!DOCTYPE html>
<html>
<head>
<style>
span.important {
font-size: 125%;
color: #e76f51;
;
}
</style>
</head>
<body>
<h4>My <span class="important">Important</span> Heading</h4>
<p>This is some <span class="important">important</span> text.</p>
</body>
</html>Output:
My Important Heading
This is some important text.
In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:
Use CSS to style all elements with the class name “city”:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: #e9c46a;
color: #264653;
padding: 10px;
}
</style>
</head>
<body>
<h4 class="city">London</h4>
<p>London is the capital of the United Kingdom.</p>
<h4 class="city">Brussels</h4>
<p>Brussels is the capital of Belgium.</p>
<h4 class="city">Bangkok</h4>
<p>Bangkok is the capital of Thailand.</p>
</body>
</html>Output:
London
London is the capital of the United Kingdom.
Brussels
Brussels is the capital of Belgium.
Bangkok
Bangkok is the capital of Thailand.
HTML elements can have more than one class name, each class name must be separated by a space.
Style elements with the class name “first”, also style elements with the class name “second”:
<!DOCTYPE html>
<html>
<style>
.first {
background-color: #e9c46a;
color: #264653;
padding: 10px;
}
.second {
text-align: center;
}
</style>
<body>
<h4 class="first second">London</h4>
<h4 class="first">Brussles</h4>
<h4 class="first">Bangkok</h4>
</body>
</html>Output:
London
Brussles
Bangkok
Different tags, like <h4> and <p>, can have the same class name and thereby share the same style:
<!DOCTYPE html>
<html>
<style>
.sameClass {
background-color: #e9c46a;
color: #264653;
padding: 10px;
}
</style>
<body>
<h2 class="sameClass">Paris</h2>
<p class="sameClass">Paris is the capital of France.</p>
</body>
</html>Output:
Paris
Paris is the capital of France.
The class name can also be used by JavaScript to perform certain tasks for elements with the specified class name.
JavaScript can access elements with a specified class name by using the getElementsByClassName( ) method:
When a user clicks on a button, hide all elements with the class name “hide”:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Hide elements</button>
<h4 class="hide">London</h4>
<p>London is the capital of the United Kingdom.</p>
<h4 class="hide">Brussels</h4>
<p>Brussels is the capital of Belgium.</p>
<h4 class="hide">Bangkok</h4>
<p>Bangkok is the capital of Thailand.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("hide");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>Output:
London
London is the capital of the United Kingdom.
Brussels
Brussels is the capital of Belgium.
Bangkok
Bangkok is the capital of Thailand.
Enjoy coding!
Read also: