What Is The HTML class Attribute

The HTML class characteristic is utilized to determine a class for a HTML component.

Various HTML components can have a similar class.

Using The HTML class Attribute

The class characteristic is frequently used to highlight a class name in a template. It can likewise be utilized by a JavaScript to get to and control components with the particular class name.

In the accompanying model we have three

In the accompanying model we have three<div> components with a class characteristic with the worth of “city”. The entirety of the three
components will be styled similarly as per the .city style definition in the head area:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

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

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

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

</body>
</html>

In the accompanying model we have two <span> components with a class characteristic with the worth of “note”. Both <span> components will be styled similarly as indicated by the .note style definition in the head area:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class=”note”>Important</span> Heading</h1>
<p>This is some <span class=”note”>important</span> text.</p>

</body>
</html>

Tip: The class characteristic can be utilized on any HTML component.

Note: The class name is case touchy!

Tip: You can learn significantly more about CSS in our CSS Tutorial.

The Syntax For Class

To make a class; compose a period (.) character, trailed by a class name. Then, at that point, characterize the CSS properties inside wavy supports {}:

Example

Create a class named “city”:<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

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

</body>
</html>

Various Classes

HTML components can have a place with more than one class.

To characterize various classes, separate the class names with a space, for example . The component will be styled by every one of the classes determined.

In the accompanying model, the first component has a place with both the city class and furthermore to the primary class, and will get the CSS styles from both of the classes:

Example

<h2 class=”city main”>London</h2>
<h2 class=”city”>Paris</h2>
<h2 class=”city”>Tokyo</h2>

Different Elements Can Share Same HTML class

Distinctive HTML components can highlight a similar class name.

In the accompanying model, both <h2> and <p> points to the “city” class and will share the same style:

Example

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

Use of The HTML class Attribute in JavaScript

The class name can likewise be utilized by JavaScript to play out specific undertakings for explicit components.

JavaScript can get to components with a particular class name with the getElementsByClassName() technique:

Example

Click on a button to hide all elements with the class name “city”:<script>
function myFunction() {
  var x = document.getElementsByClassName(“city”);
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = “none”;
  }
}
</script>