Class in HTML is Added as an Attribute to an element to indicate that it should take on the styling Attribute of the Class. It is usually used to make a group of HTML elements look the same without repeating the CSS every time, It is done for more than one HTML tags efficiently, Let us understand HTML Classes in detail.

Syntax of HTML Class

The HTML Class is defined by the <style> tag of the HTML element in the <head> tag or It can be separately specified by a file using (.) dot character followed by a class name and then the CSS properties are described under curly brackets {}.

Features of HTML Class

HTML Class Attributes specifies single or multiple class names for HTML elements.
HTML Class Attributes can also be used by the Javascript for the modification of specific class names.
HTML Class of the same class name can be used for different elements.
HTML Class supports global Attributes and the class name is case sensitive.

Basic Examples of HTML Classes

1. using the same class in HTML: In this example, all the elements will be styled equally the same in accordance with the class name defined in the head section of the HTML element.

Example:

<!DOCTYPE html> 
<html> 

<head> 
  <style> 
    .tower { 
      background-color: yellow; 
      color: black; 
      padding: 10px; 
    } 
  </style> 
</head> 

<body> 

  <h2 class="tower">BURJ KHALIFA</h2> 
  <p>Tallest building in the world.</p> 

  <h2 class="tower">SHANGHAI TOWER</h2> 
  <p>Second tallest building in the world.</p> 

  <h2 class="tower">MAKKAH ROYAL CLOCK TOWER</h2> 
  <p>Third tallest building in the world.</p> 

</body> 

</html>

output:

2. Using class Attribute in Javascript: javascript use getElementsByClassName() method to access elements in HTML to perform certain task by using specific classnames.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Useing classAttribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "tower":</p>

<button onclick="myFunction()">Hide elements</button>

  <h2 class="tower">BURJ KHALIFA</h2> 
  <p>Tallest building in the world.</p> 

  <h2 class="tower">SHANGHAI TOWER</h2> 
  <p>Second tallest building in the world.</p> 

  <h2 class="tower">MAKKAH ROYAL CLOCK TOWER</h2> 
  <p>Third tallest building in the world.</p> 
<script>
function myFunction() {
  var x = document.getElementsByClassName("tower");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>

output: before clicking the hide Element button.

After clicking the hide Element button.

3. Multiple Class in HTML: HTML Elements can have one or more class names where each class must be separeted by space for eg:<div class=” direction right”>.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.direction {
  background-color: blue;
  color: yellow;
  padding: 20px;
} 

.right {
  text-align: right;
}
</style>
</head>
<body>

<h2>Using Multiple Classes in HTML</h2>
<p>All three h2 elements belongs to the "direction" class. In addition, also belongs to the "right" class, which right-aligns the text.</p>

<h2 class="direction right">north</h2>
<h2 class="direction">south</h2>
<h2 class="direction">east</h2>
<h2 class="direction">west</h2>

</body>
</html>

output:

Class Attribute in HTML

Syntax of HTML Class

Features of HTML Class

Basic Examples of HTML Classes