HTML Id Attribute vs HTML Class Attribute: The Id attribute defines a unique value of HTML element. And the HTML Id attribute can be used with CSS and Javascript to perform a certain task. The class attribute specifies one or more class names for an element. The class attribute can be used to point to a class in a style sheet and also used in JavaScript to make changes to HTML elements with a specified class.
HTML Id with CSS
Example:
<style>
#myid
{
background-color: lightpink;
color: black;
padding: 30px;
text-align: center;
}
</style>
<h1 id="myid">Example of HTML id</h1>
HTML Id Attribute vs HTML Class Attribute
Difference between HTML class and Id Attribute
The main difference between them is HTML class name can be used by multiple elements, while an HTML element can have only one unique id that belongs to that element.
Example:
/* Style all elements with the class name "fruit" */
<style type="text/css">
.fruit {
background-color: blue;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<h1 id="myid">My Favorite Fruits</h1>
<h2 class="fruit">Mango</h2>
<p>The Kinkg of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Full of Vitamin C</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the doctor away.</p>
</body>
</html>