Classes are used to indicate multiple elements that will receive the same style. Basically, the class attribute is a separate space list of element classes. The classes allow CSS and JavaScript to select or access specific elements through class selectors or functions such as the DOM document method .getElementsByClassName.
The class attribute can be used on any HTML element, and the class name can be used by CSS and JavaScript to perform certain loads for elements with the specified class name. The HTML class attribute is used to specify a class name / multiple names for an HTML element. The class name can be used by CSS and JavaScript to do some activities for certain HTML elements. A class attribute can be written to the <style> or in a separate file using the (.) character.
Let’s give an example with three <div> elements that have the same class name:
<!DOCTYPE html>
<html>
<head>
<style>
.tennis {
background-color: PowderBlue ;
color: black;
margin: 20px;
padding: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, Sans-serif;
}
</style>
</head>
<body>
<div class="tennis">
<h2>Rafael Nadal</h2>
<p>Rafael "Rafa" Nadal Parera is a Spanish professional tennis player, currently ranked world No. 2 in men's singles tennis by the Association of Tennis Professionals.</p>
</div>
<div class="tennis">
<h2>Roger Federer</h2>
<p>Roger Federer is a Swiss professional tennis player who is ranked world No. 3 in men's singles tennis by the Association of Tennis Professionals.</p>
</div>
<div class="tennis">
<h2>Dominic Thiem</h2>
<p>Dominic Thiem is an Austrian professional tennis player. His career-high ATP ranking is world No. 4, which he first achieved on 6 November 2017. He is the second highest-ranked Austrian player in history, behind Thomas Muster. He has won fourteen ATP singles titles and reached twenty-two finals.</p>
</div>
</body>
</html>
In the rows below, we will give an example related to the use of the class attribute in inline elements. The HTML class attribute can also be used on inline elements:
<!DOCTYPE html>
<html>
<head>
<style>
span.tennis {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>History <span class="tennis">Of Tennis</span> In A Few Lines</h1>
<p>The game that most people call <span class="tennis">'Tennis'</span> is the direct descendant of what is now known as real tennis or royal tennis (which continues to be played today as a separate sport with more complex rules). Most rules of the game commonly known as tennis derive from it. It is reasonable to see both sports as variations of the same game. Most historians believe that tennis originated in the monastic cloisters in northern France in the 12th century, but the ball was then struck with the palm of the hand; hence, the name jeu de paume ("game of the palm").[1] It was not until the 16th century that rackets came into use, and the game began to be called "tennis." It was popular in England and France, and Henry VIII of England was a big fan of the game, now referred to as real tennis.</p>
</body>
</html>
Now we will use, in the example below, the class attribute in JavaScript. JavaScript can access elements with a specified class name, using the method mentioned above, namely getElementsByClassName ():
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementsByClassName("tennis");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</head>
<body>
<p>Hit the button and a JavaScript will hide the elements with the name of the "tennis" class:</p>
<button onclick="myFunction()">Hide all elements</button>
<h2 class="tennis">Rafael "Rafa</h2>
<p>Rafael "Rafa" Nadal Parera is a Spanish professional tennis player, currently ranked world No. 2 in men's singles tennis by the Association of Tennis Professionals.</p>
<h2 class="tennis">Roger Federer</h2>
<p>Roger Federer is a Swiss professional tennis player who is ranked world No. 3 in men's singles tennis by the Association of Tennis Professionals.</p>
<h2 class="tennis">Dominic Thiem</h2>
<p>Dominic Thiem is an Austrian professional tennis player. His career-high ATP ranking is world No. 4, which he first achieved on 6 November 2017. He is the second highest-ranked Austrian player in history, behind Thomas Muster. He has won fourteen ATP singles titles and reached twenty-two finals.</p>
</body>
Now we will give you an example using several classes. HTML elements can have several different class names, where each class name must be separated by a space:
<!DOCTYPE html>
<html>
<style>
.tennis{
background-color: PowderBlue ;
color: black;
margin: 20px;
padding: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, Sans-serif;
}
.middle {
text-align: center;
}
</style>
<body>
<h2 class="tennis ">Rafael "Rafa" Nadal Parera is a Spanish professional tennis player, currently ranked world No. 2 in men's singles tennis by the Association of Tennis Professionals.</h2>
<h2 class="tennis middle">Roger Federer is a Swiss professional tennis player who is ranked world No. 3 in men's singles tennis by the Association of Tennis Professionals.</h2>
<h2 class="tennis">Dominic Thiem is an Austrian professional tennis player. His career-high ATP ranking is world No. 4, which he first achieved on 6 November 2017. He is the second highest-ranked Austrian player in history, behind Thomas Muster. He has won fourteen ATP singles titles and reached twenty-two finals.</h2>
</body>
</html>
Another example in which we use the same class in different labels, such as <p> or <h3>, can have the same class name and can share the same style:
<!DOCTYPE html>
<html>
<style>
.tennis {
background-color: PowderBlue ;
color: black;
margin: 20px;
padding: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, Sans-serif;
}
</style>
<body>
<h2 class="tennis">Dominic Thiem</h2>
<p class="tennis">Dominic Thiem is an Austrian professional tennis player. His career-high ATP ranking is world No. 4, which he first achieved on 6 November 2017. He is the second highest-ranked Austrian player in history, behind Thomas Muster. He has won fourteen ATP singles titles and reached twenty-two finals.</p>
</body>
</html>
Even if the two elements do not have the same label name, they can instead have the same class name, thus obtaining the same style.
Browsers Accepted: The Class attribute supported browser is Internet Explorer, Google Chrome, Opera, Safari, Firefox.
Conclusion
HTML elements often have additional information in the form of attributes. Attributes can be name pairs, value pairs, and some of the most common are class and style. I also learned how to add, remove, switch, use or replace CSS classes for an element and how to edit CSS styles online.
