HTML class Attribute

In HTML, the class attribute is used to assign one or more class names to an HTML element.

The class attribute is a way to apply styles or define behaviors to a group of elements that share the same class name. Each HTML element can have multiple class names separated by spaces.

Here's the basic syntax for adding a class attribute to an HTML element:

Example

<html>
<head>
<style>
.city {
  background-color: blue;
  color: white;
  border: 2px solid yellow;
  margin: 20px;
  padding: 10px;
}
</style>
</head>
<body>

<div class="city">
<h2>Ranchi</h2>
<p>Ranchi is the capital of Jharkhand.</p>
</div> 

<div class="city">
<h2>Patna</h2>
<p>patna is the capital of Bihar.</p>
</div>

<div class="city">
<h2>Bhuneshwer</h2>
<p>Bhuneshweris the capital of Orisha.</p>
</div>

</body>
</html>

You can click on above box to edit the code and run again.

Output

Ranchi

Ranchi is the capital of Jharkhand.

Patna

Patna is the capital of Bihar.

Bhuneshwer

Bhuneshwer is the capital of Orisha.

<tagname>: Represents the HTML element you want to apply the class to (e.g., <div>, <p>, <h1>, etc.).
class="classname1 classname2 ...": The class attribute, where you can specify one or more class names separated by spaces

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> point to the "city" class and will share the same style:

Example

    <style>
.city {
  background-color: blue;
  color: white;
  padding: 10px;
} 
</style>
<h2 class="city">Ranchi</h2>
<p class="city">Ranchi is the capital of Jharkhand.</p>

You can click on above box to edit the code and run again.

Output

Ranchi

Ranchi is the capital of Jharkhand.

In this example, the <p> element has a class attribute with the value "highlight." You can define styles for the "highlight" class in your CSS to apply specific formatting to all elements with that class.

Multiple classes can be applied to an element by separating them with spaces:

Example

         
 /* CSS style block or external stylesheet */

.highlight {
     color: red;
     font-weight: bold;
}
                                                       
.box {
   border: 1px solid #ccc;
    padding: 10px;
}

 .border {
     border: 2px solid blue;
}

.rounded {
    border-radius: 5px;
}

You can click on above box to edit the code and run again.

Output

In this CSS example, styles are defined for the "highlight," "box," "border," and "rounded" classes. These styles will be applied to HTML elements with the corresponding class names.

Using the class attribute allows for a modular and organized approach to styling and scripting in HTML, making it easier to manage and maintain code.

Multiple Classes

In HTML, an element can have multiple classes assigned to it by using the class attribute and separating the class names with spaces. This allows you to apply styles or define behaviors for elements that belong to multiple class categories.

Example

 <style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 

.main {
  text-align: center;
}
 </style>
 </head>
 <body>
<h2 class="city main">Ranchi</h2>
<h2 class="city">Patna</h2>
<h2 class="city">Bhuneshwer</h2>
 </body>
  <html>

You can click on above box to edit the code and run again.

Output

Ranchi

Patna

Bhuneshwer

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example

<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>

You can click on above box to edit the code and run again.

Output

Ranchi

Ranchi is the capital of jharkhand.

Patna

Patna is the capital of Bihar.

Bhuneshwer

Bhuneshweris the capital of Orisha.