A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:
Live Demo & Try it yourself!
Live Demo & Try it yourself!
| CSPunjab.Com |
Video is not available... Embedded is previous playlist.
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {background-color: lightblue;color: black;padding: 40px;text-align: center;}
/* Style all elements with the class name "city" */
.school {background-color: tomato;color: white;padding: 10px;}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>
<!-- An element with a unique id -->
<h1 id="myHeader">Schools</h1>
<!-- Multiple elements with same class -->
<h2 class="school">GSSS KHOKHAR</h2>
<p>GOVT.SEN.SEC.SCHOOL, KHOKHAR</p>
<h2 class="school">GHS, HARAZ</h2>
<p>GOVT. HIGH SCHOOL, HARAZ</p>
<h2 class="school">GSSS SARAINAGA</h2>
<p>GOVT.SEN.SEC.SCHOOL, SARAINAGA</p>
</body>
</html>