HTML – Classes

The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting elements.

A class attribute can be defined within <style> tag or in a separate file using the (.) character.

In an HTML document, we can use the same class attribute name with different elements.

Note: The class name is case sensitive! Class names should be meaningful and related to the block of code.

Syntax for Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

<html>
   <head>
      <title>This is document title</title>
   </head>	
      <style>
         .language {
         background-color: #ddd;
         color: white;
         padding: 10px;
         }
      </style>
   </head>
   <body>
      <h2 class="language">HTML</h2>
      <p>HTML is a markup language</p>
      
      <h2 class="language">CSS</h2>
      <p>CSS is a way to control styles.</p>
   </body>
</html>

Multiple Classes

We can use multiple class names (more than one) with HTML elements. These class names must be separated by a space.

<html>
   <head>
      <title>This is document title</title>
   </head>	
      <style>
         .language {
            background-color: #ddd;
            color: white;
            padding: 10px;
         }
         .center{
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h2 class="language center">HTML</h2>
      <p>HTML is a markup language</p>
      
      <h2 class="language center">CSS</h2>
      <p>CSS is a way to control styles.</p>
   </body>
</html>

Different Elements Can Share The Same Name

We can use the same class name with different tags like <h2> and <p> etc. to share the same style.

<html>
   <head>
      <title>This is document title</title>
   </head>	
      <style>
         .language {
            background-color: #ddd;
            color: white;
            padding: 10px;
         }
         .center{
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h2 class="language center">HTML</h2>
      <p class="center">HTML is a markup language</p>
      
      <h2 class="language center">CSS</h2>
      <p class="center">CSS is a way to control styles.</p>
   </body>
</html>

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:

<html>
   <head>
      <title>This is document title</title>
   </head>	
      <style>
         .language {
            background-color: #ddd;
            color: white;
            padding: 10px;
         }
         .center{
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h2 class="language center">HTML</h2>
      <p class="center">HTML is a markup language</p>
      
      <h2 class="language center">CSS</h2>
      <p class="center">CSS is a way to control styles.</p>
      <script>
         var language =  document.getElementsByClassName("language");
         for (var i = 0; i < language.length; i++) {
            language[i].style.display = "none";
         }
      </script>
   </body>
</html> 

In the above example, the script tag is used which is a part of javascript. In this, we have written code which helps in removing the element with “language” class. 

Later on, we will discuss it’s the syntax in detail.

Supporting Browsers

AttributeChromeIEFirefoxOperaSafari
classYesYesYesYesYes