In this article, we will learn about HTML Classes, Defining an HTML class, HTML multiple classes and Class Attribute in JavaScript along with their implementation through examples.
HTML Class
The HTML class attribute is used to specify one or more class names for an HTML element. Each class name can be used by CSS and JavaScript to perform certain functions for HTML elements. The HTML class attribute can be specified within <style> tag or in separate file using the (.) character. In HTML document, we can use same class attribute named with different elements.
Defining an HTML class
In the following example we have used two <div> elements with a class attribute and with value of "btn". These two <div> elements will be styled uniformly according to the .btn style definition in the <head> section;
<!DOCTYPE html><html>
<head>
<style>
.btn{
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="btn">
<h2>Demo 1</h2>
<p>This is first demo button.</p>
</div>
<div class="btn">
<h2>Demo 2</h2>
<p>This is second demo button.</p>
</div>
<div class="btn">
<h2>demo 3</h2>
<p>This is third demo button.</p>
</div>
</body>
</html>
Output
In the following example we have used two <span> elements with a class attribute and with value of "note". These two <span> elements will be styled uniformly according to the .note style definition in the <head> section;
<!DOCTYPE html><html>
<head>
<style>
.note{
font-size: 120%;
color: blue;
}
</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
HTML Multiple Classes
HTML can contain more than one class name and to define these html multiple classes, it must be separated by a space.
In the following example, we have discussed how to implement multiple classes in html document;
<!DOCTYPE html><html>
<head>
<style>
.city{
background-color: blue;
color: white;
padding: 10px;
}
.main{
text-align: center;
}
</style>
</head>
<body>
<h2>HTML Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, Chandigarh also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="city main">Chandigarh</h2>
<h2 class="city">Mohali</h2>
<h2 class="city">Zirakpur</h2>
</body>
</html>
Output
Class Attribute in JavaScript
JavaScript can also use the class name to perform specific tasks for certain elements. By using getElementdByClassName() method with the specific class name, JavaScript can access elements.
<!DOCTYPE html><html>
<body>
<h2>Html Class Attribute with JavaScript</h2>
<p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("fruit");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Output
Same class with Different Tag
In html, different Elements can share same class that means you can use the same class name with different tags such as <h2> and <p> etc. - will share the same style;
<!DOCTYPE html><html>
<style>
.fruit{
background-color: orange;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Html Same Class with Different Tag</h2>
<h2 class="fruit">Apple</h2>
<p class="fruit">An Apple a day keeps the doctor away.</p>
</body>
</html>
Output
Conclusion
Above we have discussed about HTML Classes, Defining an HTML class, HTML multiple classes and Class Attribute in JavaScript along with their implementation through examples. The HTML class attribute is used to specify one or more class names for an HTML element. HTML can contain more than one class name and to define these html multiple classes, it must be separated by a space.