HTML Classes

HTML Class is an attribute which is used to define identical styles for elements using the same class name. The HTML elements defined with the same class name will have the same format and style.

You can also specify one or more class names for an HTML element.

It can be used with any HTML element.

This attribute can be used by CSS and JavaScript in order to carry out some tasks for the elements using the particular class name.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.country {
  background-color: black;
  color: white;
  padding: 10px;
 }

</style>
</head>
<body>

<div class="country" >
<h1>United States of America </h1>
<p>It is a country of 50 states. </p>
</div >

<div class="country" >
<h1>United Kingdom </h1>
<p>It includes England, Wales, Scotland, and Northern Ireland. </p>
</div >

<div class="country" >
<h1>India </h1>
<p>It is a country of 26 states. </p>
</div >

</body>
</html>

HTML class attribute on inline elements

You can use class attribute on inline elements as well. It means that class attribute can also be used inside the HTML elements.

The <span> tag is used to group inline elements in a HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
span.country {
  font size: 150%;
  color: blue;
 }

</style>
</head>
<body>

<h1>United States of America is a country of <span class="country" >26 States </span>. </h1>
</body>
</html>

Select HTML Elements with a Precise Class Name

CSS is used to select HTML elements with a precise class name. it is written with (.)Period followed by the class name.

<!DOCTYPE html>
<html>
<head>
<style>
.country {
  background-color: black;
  color: white;
  padding: 10px;
 }

</style>
</head>
<body>

<h2 class="country" >United States of America </h2>
<p>It is a country of 50 states. </p>
<h2 class="country" >United Kingdom </h2>
<p>It includes England, Wales, Scotland, and Northern Ireland. </p>
<h2 class="country" >India </h2>
<p>It is a country of 26 states. </p>
</body>
</html>

More than one Class name

More than one class name can also be used on HTML elements, where each class name is separated by a space.

Example:

<h2 class="country" >United States of America </h2>
<h2 class="country" >United Kingdom </h2>
<h2 class="country name" >India </h2>

In this example, the Style elements are defined with two class name, i.e. “country” and “name”

The last <h2> element belongs to both class name “country” and “name”

Same class in different tags

Another feature, you can specify the different tags such as <h2> and <p> with the same class name, thus they will share the same style.

Even if the elements do not have the same tag name, they can be defined with the same class name.

Example:

<h2 class="country" >United States of America </h2>
<p class="country" >It is a country of 50 states. </p>

HTML class attribute in JavaScript

JavaScript can also use HTML class attribute in order to perform some tasks for HTML elements with the class name.

HTML elements can be accessed by JavaScript with the specified class name with the help of getElementsByClassName() method.

Example:

<!DOCTYPE html>
<html>
<body>

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

<h2 class="country" >United States of America </h2>
</p>It is a country of 50 states.</p>

<h2 class="country" >United States of America </h2>
</p>It is a country of 50 states.</p>

<h2 class="country" >United Kingdom </h2>
</p>It includes England, Wales, Scotland, and Northern Ireland.</p>

<h2 class="country" >India </h2>
</p>It is a country of 26 states.</p>

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

</script>
</body>
</html>

In this example, when hide button is clicked, JavaScript will hide all elements specified with the class name “country”.