Identification and Grouping of Elements (Class and Id)

Sometimes you want to apply a special style to a particular element or a particular group of elements.

For example, you have two lists of links of fruits and vegetables.  You can use style a {color:blue;} to make the links to blue color. You want the Fruits links to be orange, the Vegetable links to be green and the rest of the existing links on the webpage to stay blue.

To achieve this, divide the links into two categories. This is done by assigning a class to each link using the attribute class. Then define special properties for links belonging to the classes.

a {
color: blue;
}
a.fruits {
color: orange;
}
a.veg {
color: green;
}

HTML code is:

<UL>
 <LI><a href="/mango.html" class="fruits">Mango</a></LI>
 <LI><a href="/orange.html" class="fruits">Orange</a></LI>
</UL>
<UL>
 <LI><a href="/brinjal.html" class="veg">Brinjal</a></LI>
 <LI><a href="/cabbage.html" class="veg">Cabbage</a></LI>
</UL>

Identification of element using id

In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id.

What is special about the attribute id is that there can not be two elements in the same document with the same id. Each id has to be unique. In other cases, you should use the class attribute instead.

You define the properties in a specific element by using #id in the stylesheet of the document.