HTML Class

⟼. The class attribute is often used in CSS and JavaScript for some tasks. When you can use the class in CSS , you can use Dot (.) character, followed by the name of the class for selecting elements.

class attribute can be defined within <style> tag or use in separate file .

See in Example:

   <style>  
    .p{   color: lightgreen;  
        }  
    </style>  
       <h1 class="p">This is first heading use of class elements</h1>  
 

Output:-

This is first heading use of class elements

See in Example 2:

    <!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>

<h2 class="city">India</h2>
<p>India is the capital of New Delhi.</p>

<h2 class="city">India</h2>
<p>India is the Grate Country.</p>
 </body>
</html>

 

Output:-

The class Attribute

Use CSS to style elements with the class name "city":

India

India is the capital of New Delhi.

India

India is the Grate Country.

Class Attribute Use in JavaScript

When class name can be used in JavaScript then use getElementsByClassName() method to perform certain tasks for specific elements.

See in Example :

<!DOCTYPE html>
<html>
<body>

<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>

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

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>

 

OutPut:-

Click the button to hide all elements with class name "city":

CHINA

China has the largest population in the world.

INDIA

India has the second largest population in the world.

UNITED STATES

United States has the third largest population in the world.

Next TopicHTML ID

← prev next →

HTML Tutorials

HTML Tags

HTML5 Tutorial

HTML Class

See in Example:

This is first heading use of class elements

See in Example 2:

The class Attribute

India

India

Class Attribute Use in JavaScript

See in Example :

OutPut:-

CHINA

INDIA

UNITED STATES