Class vs ID
Cascading Style Sheets (CSS) is a language that describes the look and formatting of a document written using a markup language. CSS is widely used to style web pages written in HTML. CSS allows specifying your own style selectors in addition to applying styles for HTML elements. This is done using the ID and class selectors. When specifying a style for a single unique element, the ID selector is used. When specifying a style for a group of elements, the class selector is used.
What is a Class?
In CSS, Class selector can be used to apply your own style to a group of elements. The Class selector is used to apply a specific style to a set of elements with the same class. In CSS, a class selector is identified by a full stop (.). Following is an example of a class selector defined in CSS.
.my_class {
color: blue;
font-weight: bold;
}
HTML can refer to the class defined in CSS by using the attribute class as shown bellow.
<p class=”my_class”>This is my formatting</p>
<p class=”my_class”>This is my formatting again</p>
As shown above, the same class could be used for multiple elements and a single element can use multiple classes. When multiple classes are used in the same element, the classes are inserted in to the class attribute delimited by a space as shown bellow.
<p class=”my_class_1 my_class_2″>This is my formatting using two classes</p>
What is an ID?
In CSS, ID selector can be used to apply your own style to a single unique element. In CSS, an ID selector is identified by a hash (#). Following is an example of an ID selector defined in CSS.
#my_ID {
color: red;
text-align:right;
}
HTML can refer to the ID selector defined in CSS by using the attribute id as shown bellow.
<p id=”my_ID”>This is my formatting form a ID selector</p>
IDs are unique. Therefore each element can only have a single ID and each page can have only a single element with that specific ID. IDs have an important characteristic that can be used with a browser. If the page URL contains a hash value (e.g. http://myweb.com#my_id) the browser will try to automatically locate the element with the ID “my_id” and scroll the web page to display that element. This is a one reason why the page should have a single element with that specific ID, so that the browser can locate that element.
What is the difference between Class and ID?
Even though both the Class selector and ID selector can be used to apply your own style to elements in a web page, they have some important differences. Class selector can be used to apply your own style to a group of elements, while the ID selector is used to apply a style to a single, unique element. When using IDs, each element can only have a single ID and each page can have only a single element with that specific ID, but Class could be used for multiple elements and a single element can use multiple Classes. Furthermore, ID can be used to scroll a page automatically to display the element with that ID, but this is not possible with the class selector.