View video tutorial

HTML Class

HTML

class allows HTML to select a group of elements.

Elements Selection


The class is a general identification for one or more elements.

It is not necessarily to be unique in a document. Same class name can be used for other elements.

A class is used to apply style or script on the element.

The class is a single name with no space and started with letter, and is case sensitive.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
    <title>class Attribute Example</title>
    <style>
        .c1{
            color: white;
            background-color:#404040;
            padding:20px;
            font-size: 20pt;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <p>class Attribute in CSS</p>
    <p class="c1">Hello w3context.</p>
    <p class="c1">Hello World!</p>
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.


Example

<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
    <title>class Attribute Example</title>
    <script>
        function m1() {
            var e = document.getElementsByClassName("c1");
            e[0].style.color = "white";
            e[0].style.backgroundColor = "#404040";
            e[0].style.padding = "20px";
            e[0].style.fontSize = "20pt";
            e[0].style.borderRadius = "5px";            
        }
    </script> 
</head>
<body onload="m1();">
    <p>class Attribute in JavaScript</p>
    <p class="c1">Hello w3context.</p>
    <p class="c2">Hello World!</p>
    <p class="c3">Hello HTML!</p>    
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.


Example

<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
    <title>class Attribute Example</title>
    <script>
        function m1() {
            var e = document.getElementsByClassName("c1");
            for(var i=0;i<e.length;i++){
            e[i].style.color = "white";
            e[i].style.backgroundColor = "#404040";
            e[i].style.padding = "20px";
            e[i].style.fontSize = "20pt";
            e[i].style.borderRadius = "5px";            
            }
        }
    </script> 
</head>
<body onload="m1();">
    <p>class Attribute in JavaScript</p>
    <p class="c1">Hello w3context.</p>
    <p class="c1">Hello World!</p>
	<p class="c2">Hello HTML!</p>    
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.


Example

<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
    <title>class Attribute Example</title>
    <script>
        function m1() {
            var e = document.querySelectorAll(".c1,.c2");
            for(var i=0;i<e.length;i++){
            e[i].style.color = "white";
            e[i].style.backgroundColor = "#404040";
            e[i].style.padding = "20px";
            e[i].style.fontSize = "20pt";
            e[i].style.borderRadius = "5px";            
            }
        }
    </script> 
</head>
<body onload="m1();">
    <p>class Attribute in JavaScript</p>
    <p class="c1">Hello w3context.</p>
    <p class="c1">Hello World!</p>
	<p class="c2">Hello HTML!</p>    
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.