CSS Classes vs ID
There is often confusion about when it is appropriate to use CSS IDs and when CSS Classes should be used instead. This lesson is geared to display the differences, as well as provide more information about CSS IDs.
What is an ID Selector?
The W3C defines class ID as "a unique identifier to an element". But what does that actually mean? Hopefully you have already read our CSS Classes lesson, if not, we recommend that you do so.
CSS IDs are similar to classes in that they define a special case for an element. Below is an example of a CSS ID.
CSS Code:
p#exampleID1 { background-color: white; }
p#exampleID2 { text-transform: uppercase; }
HTML Code:
<p id="ExampleID1">This paragraph has an ID name of
"exampleID1" and has a white CSS defined background</p>
<p id="ExampleID2">This paragraph has an ID name of
"exampleID2" and has had its text transformed to uppercase letters. </p>
Display:
This paragraph has an ID name of "exampleID1" and has a white CSS defined background.
This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.
Notice that an ID's CSS is an HTML element, followed by a "#", and finally ID's name. The end result looks something like "element#idname". Also, be sure to absorb the fact that when an ID is used in HTML, we must use "id=name" instead of "class=name" to reference it!
When to Use Classes?
A class can be used several times, while an ID can only be used once, so you should use classes for items that you know you're going to use a lot. An example would be if you wanted to give all the paragraphs on your webpage the same styling, you would use classes.
CSS Code:
p.exampleID3 { background-color: #013370; color: white;}
HTML Code:
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
Display:
These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!
These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!
These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!
Why Did They Choose Those Names??
- ID = A person's Identification (ID) is unique to one person.
- Class = There are many people in a class.
ID for Layout and Uniqueness
Standards specify that any given ID name can only be referenced once within a page or document. From our experience, IDs are most commonly used correctly in CSS layouts. This makes sense because there are usually only one menu per page, one banner, and usually only one content pane.
In Tizag.com CSS Layout Examples we have used IDs for the unique items mentioned above.
View the CSS Code for our first layout example. Below are the unique IDs in our code.
- Menu - div#menuPane
- Content - div#content
Answer: Classes vs IDs
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! Try it out! | 
