HTML Classes – HTML Class Attribute

Welcome to DataFlair HTML Tutorial Series!!!! In this article, we will learn about HTML Classes in detail. So let’s start!!

HTML Classes

Keeping you updated with latest technology trends, Join DataFlair on Telegram

HTML Classes

HTML class attribute can be accessed by any element and is useful to identify a group of elements in an HTML document together. These elements can be styled using CSS or actions that can be performed on them using JavaScript.

For example,

<!DOCTYPE html> 
<html>   
<head> 
    <style> 
        .country {  
            background-color: black; 
            color: white; 
            padding: 8px; 
            font-weight: bold;
            font-family: monospace;
        } 
    </style> 
</head> 
 <body> 
    <h2 class="country">DataFlair</h2> 
    <p>HTML Attributes</p>  
    <h2 class="country">Article on</h2>  
    <h2 class="country">The Class attribute</h2>   
</body> 
</html> 

(Here, the class attribute is accessed with CSS using the dot operator i.e. ‘.’).
Output-

html class attribute

As seen, all the HTML elements with the same class are styled in the same manner. A period (.) is used to access the elements with the same class name in CSS.

Note-The class name is case-sensitive.

HTML Classes Attribute on Inline Elements

Class attribute in HTML can be used on inline elements, such as the <span> element.
Code-

<!DOCTYPE html>
<html>
<head>
<style>
span.dataflair{
  font-size: 40px;
  color: red;
}
</style>
</head>
<body>
<h1>Welcome to <span class="dataflair">DataFlair</span> E-Learning</h1>
<p>This is an <span class="dataflair">important</span>text.</p>
</body>
</html>

Output-

html class attribute on inline elements

Same Class Name for Different Tags

The same class name can be used for different tags, i.e., h2, and p can use the same class name and can be styled in the same manner.
Code-

<!DOCTYPE html> 
<html> 
<style> 
    .dataflair { 
        background-color: black; 
        color: white; 
        padding: 10px; 
    } 
</style>   
<body> 
  
    <h2 class="dataflair">DataFlair</h2> 
    <p class="dataflair">We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>  
</body>   
</html>

Output-

html same class name

Multiple Classes

It is possible for HTML elements to have more than one class name, separated by spaces. For example,
Code-

<!DOCTYPE html> 
<html> 
<style> 
    .dataflair { 
        background-color: black; 
        color: white; 
        padding: 10px; 
    } 
      
    .centre { 
        text-align: center; 
    } 
</style> 
  
<body> 
  
    <h2 class="dataflair centre">Welcome</h2> 
    <h2 class="dataflair">To DataFlair</h2> 
    <h2 class="dataflair">E-learning</h2> 
  
</body> 
  
</html>

Output-

html multiple classes

As we can see, the first heading(Welcome) is center-aligned, since it belongs to another class, centre, whose CSS property has been applied to it.

Class Attribute in JavaScript

The class attribute can be used along with javascript. The getElementsByClassName() method is useful to access the elements belonging to a specific class. For example,
Code-

<!DOCTYPE html> 
<html> 
<head>
<style> 
    .dataflair { 
        background-color: black; 
        color: white; 
        padding: 10px; 
    } 
      
    .centre { 
        text-align: center; 
    } 
</style>
<script>
   function myFunction() {
  var x = document.getElementsByClassName("dataflair");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script> 
</head> 
<body>

    <button onclick="myFunction()">Click Me.</button>
    <h1>Class attribute with JavaScript</h1>
    <h2 class="dataflair centre">Welcome</h2> 
    <h2 class="dataflair">To DataFlair</h2> 
    <h2 class="dataflair">E-learning</h2> 
  
</body> 
  
</html>

Output-
Before-

html class attribute in javascript

After-

html class attribute in javascript

As soon as we click the button, all the elements with the class name ‘dataflair’ hide.

Browsers Supported by HTML Classes Attribute

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Safari
  • Opera

Summary

HTML classes are of great importance for grouping similar elements, that need to be styled using CSS or perform an action using JavaScript, together. HTML classes are defined using the class attribute and are accessed using a period(.). An HTML document can have multiple classes, and different tags can also have the same class name. We’ve also discussed the styling of elements using the class element and the ‘getElementsByClassName’ method of JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.