HTML CSS Classes and IDs

There is often a confusion between CSS id's and classes as to which one to use where. An ID selector, as per W3C's definition, should be used as the identifier of a sole tag. Think of it as your social security number: no two people have the same SSN. Classes, on the other hand, can be assigned to more than one tag. You are a web designer (that's your "class" name), but there are many more designers out there.

HTML Example:

This paragraph is of "myclass" class
This one too.
This paragraph's ID is"myid"
This is not valid
 

CSS Example:

p#myid { background: yellow; }

p.myclass {background: cyan; } 

Result:

This paragraph is of "myclass" class

This one too.

This paragraph's ID is"myid"

This is not valid

Even though browsers can usually render multiple elements with the same ID (do you see the last paragraph on a yellow background?), the code is not valid. 

IDs are to be used with unique and easily identifiable blocks in your design. Defining a different ID for, let's say, the top menu, the sidebar and the footer is a good practice.