THE DIFFERENCE BETWEEN A CLASS AND AN ID SELECTOR.
In CSS, Class and ID selectors are used to identify different HTML elements. The aim of using Class and ID is to style the same HTML element differently, depending on its Class or ID.
Class can be applied to multiple elements:
If your goal is to apply same style to multiple elements in your code then use Class. A Class selector is used when the same style must be applied to multiple HTML elements on the same web page. The Full stop (“.”) symbol followed by the Class name is used to select a particular Class.
Example:
How to Create a Class in HTML: <div class= “className”>
How Create HTML element with multiple Classes: <div class=”className another_className”>
How to Access a Class in CSS: We use the Full stop (“.”) symbol followed by the Class name to select a particular Class e.g .classExample {color: #0b0bc0; font-size: 25px;}
ID’s are Unique (They cannot be applied to multiple elements):
If your goal is to apply same style to a single element in your code then use ID. An ID which stands for “identifier” is a unique identifier of the HTML element to which a particular style must be applied. It is used only when a single HTML element on the web page must have a specific style. The Hash (“#”) symbol followed by the ID name is used to select a particular ID.
How to Create an ID in HTML: <div id= “idName”>
How to Access an ID in CSS: We use the Hash (“#”) symbol followed by the ID name to select a particular ID e.g #idExample {color: #0b0bc0; font-size: 25px;}
IN CONCLUSION:
The difference between a Class and an ID is that the former is not Unique, while the latter is Unique. This means that, because Classes are not unique, the same Class can be used on multiple elements and we can use several classes on the same element. But as the ID, each element can have only one ID, and each page can have only one element with that ID. When using the same ID on multiple elements, the code won’t pass validation.
Thanks for reading.
