HTML Class Attribute

Class in HTML:

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 class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

Supported Tags: It supports all HTML elements.

Example: This example shows the use of the classes in HTML.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .country {
            background-color: black;
            color: white;
            padding: 8px;
        }
    </style>
</head>
 
<body>
    <h2 class="country">CHINA</h2>
 
    <p>
          China has the largest population
        in the world.
      </p>
 
    <h2 class="country">INDIA</h2>
 
    <p>
          India has the second largest
        population in the world.
      </p>
 
    <h2 class="country">UNITED STATES</h2>
 
    <p>
          United States has the third largest
        population in the world.
      </p>
</body>
</html>

Output: In the above example CSS styles all elements with the class name “country”.

Using the class attribute in JavaScript: JavaScript can access elements with a specified class name by using the getElementsByClassName() method.

Example: This example shows the use of class attributes in javascript.

HTML

<!DOCTYPE html>
<html>
<head>
    <script>
        function myFunction() {
            var x = document.getElementsByClassName("country");
            for (var i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
        }
    </script>
</head>
 
<body>
    <p>
        Click the button, and a JavaScript hides all
        elements with the class name "country":
    </p>
 
    <button onclick="myFunction()">Hide elements</button>
    <h2 class="country">CHINA</h2>
 
    <p>
        China has the largest population in the world.
    </p>
 
    <h2 class="country">INDIA</h2>
 
    <p>
        India has the second largest population in
          the world.
    </p>
 
    <h2 class="country">UNITED STATES</h2>
 
    <p>
        United States has the third largest population
        in the world.
    </p>
</body>
</html>

Output:

Using multiple classes: HTML elements can have more than one class name, where each class name must be separated by a space.

Example: In this example, we will use more than one class.

HTML

<!DOCTYPE html>
<html>
<style>
    .country {
        background-color: black;
        color: white;
        padding: 10px;
    }
    .middle {
        text-align: center;
    }
</style>
 
<body>
    <h2 class="country middle">CHINA</h2>
    <h2 class="country">INDIA</h2>
    <h2 class="country">UNITED STATES</h2>
</body>
</html>

Output: All three headers have the class name “country”, but in addition to that, CHINA also has the class name “middle”, which makes the text center-aligned.

Using the same class in different tags: Different tags, like <h2> and <p>, can have the same class name and thereby share the same style.

Example: This example shows the use of the above approach.

HTML

<!DOCTYPE html>
<html>
<style>
    .country {
        background-color: black;
        color: white;
        padding: 10px;
    }
</style>
 
<body>
    <h2 class="country">CHINA</h2>
    <p class="country">
        China has the largest
        population in the world.
    </p>
</body>
</html>