Skip to content
Related Articles

Related Articles

Improve Article

Difference between an id and class in HTML?

  • Last Updated : 23 Jul, 2021

HTML id Attribute: The id attribute is a unique identifier which is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using # symbol followed by id.
Syntax: 
 

<element id="id_name">

In CSS Stylesheet:
#id_name {
    // CSS Property
}

Example: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML id attribute
    </title>
     
    <style>
        #geeks{
            color:green;
            font-size:25px;
        }
    </style>
</head>
 
<body style="text-align:center">
    <h1>Geeks for Geeks</h1>
    <p id="geeks">Welcome to Geeks for Geeks</p>
 
     
<p>A Computer Science portal for geeks</p>
 
</body>
 
</html>                   

Output: 
 

HTML class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in CSS stylesheet using “.” symbol.
Syntax: 
 



<element class="class_name">

In CSS Stylesheet:
.class {
    // CSS Property
}

Example: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .geeks{
            color:green;
            font-size:25px;
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1>Geeks for Geeks</h1>
     
<p> Welcome to Geeks for Geeks</p>
 
    <p class="geeks">
        A Computer Science portal for geeks
    </p>
 
</body>
 
</html>                   

Output: 
 

Difference between id and class attribute: The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements. 
 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :