HTML Classes – HTML Class Attribute
Free Web development courses with real-time projects Start Now!!
Welcome to DataFlair HTML Tutorial Series!!!! In this article, we will learn about HTML Classes in detail. So let’s start!!
HTML Classes
HTML class attribute can be accessed by any element and is useful to identify a group of elements in an HTML document together. These elements can be styled using CSS or actions that can be performed on them using JavaScript.
Classes also help in creating interactive web pages as one can group elements under a common class and can then apply JavaScript functions to enhance user interactions.
For example,
<!DOCTYPE html>
<html>
<head>
<style>
.country {
background-color: black;
color: white;
padding: 8px;
font-weight: bold;
font-family: monospace;
}
</style>
</head>
<body>
<h2 class="country">DataFlair</h2>
<p>HTML Attributes</p>
<h2 class="country">Article on</h2>
<h2 class="country">The Class attribute</h2>
</body>
</html>
(Here, the class attribute is accessed with CSS using the dot operator i.e. ‘.’).
Output-
As seen, all the HTML elements with the same class are styled in the same manner. A period (.) is used to access the elements with the same class name in CSS.
Note – The class name is case-sensitive.
Using classes in HTML allows for consistent styling and behavior across multiple elements. It is useful in large projects where maintaining uniformity is crucial. Also, classes enhance code readability and organization, making it easier for developers to collaborate and maintain the codebase.
HTML Classes Attribute on Inline Elements
Class attribute in HTML can be used on inline elements, such as the <span> element.
Code-
<!DOCTYPE html>
<html>
<head>
<style>
span.dataflair{
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<h1>Welcome to <span class="dataflair">DataFlair</span> E-Learning</h1>
<p>This is an <span class="dataflair">important</span>text.</p>
</body>
</html>
Output-
Same Class Name for Different Tags
The same class name can be used for different tags, i.e., h2, and p can use the same class name and can be styled in the same manner.
Code-
<!DOCTYPE html>
<html>
<style>
.dataflair {
background-color: black;
color: white;
padding: 10px;
}
</style>
<body>
<h2 class="dataflair">DataFlair</h2>
<p class="dataflair">We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</body>
</html>
Output-
Multiple Classes
It is possible for HTML elements to have more than one class name, separated by spaces. For example,
Code-
<!DOCTYPE html>
<html>
<style>
.dataflair {
background-color: black;
color: white;
padding: 10px;
}
.centre {
text-align: center;
}
</style>
<body>
<h2 class="dataflair centre">Welcome</h2>
<h2 class="dataflair">To DataFlair</h2>
<h2 class="dataflair">E-learning</h2>
</body>
</html>
Output-
As we can see, the first heading(Welcome) is center-aligned, since it belongs to another class, centre, whose CSS property has been applied to it.
Class Attribute in JavaScript
The class attribute can be used along with javascript. The getElementsByClassName() method is useful to access the elements belonging to a specific class. For example,
Code-
<!DOCTYPE html>
<html>
<head>
<style>
.dataflair {
background-color: black;
color: white;
padding: 10px;
}
.centre {
text-align: center;
}
</style>
<script>
function myFunction() {
var x = document.getElementsByClassName("dataflair");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</head>
<body>
<button onclick="myFunction()">Click Me.</button>
<h1>Class attribute with JavaScript</h1>
<h2 class="dataflair centre">Welcome</h2>
<h2 class="dataflair">To DataFlair</h2>
<h2 class="dataflair">E-learning</h2>
</body>
</html>
Output-
Before-
After-
As soon as we click the button, all the elements with the class name ‘dataflair’ hide.
Browsers Supported by HTML Classes Attribute
- Firefox
- Google Chrome
- Internet Explorer
- Safari
- Opera
Summary
HTML classes are of great importance for grouping similar elements, that need to be styled using CSS or perform an action using JavaScript, together. HTML classes are defined using the class attribute and are accessed using a period(.). An HTML document can have multiple classes, and different tags can also have the same class name. We’ve also discussed the styling of elements using the class element and the ‘getElementsByClassName’ method of JavaScript.
You give me 15 seconds I promise you best tutorials
Please share your happy experience on Google
