CSS ID vs Class

Question

What is the basic difference between CSS ID and CSS Class?

Someone told me that, ID can be used only once in a page. But I found that it can be used multiple times.

like

body
{
        background-color: #3399FF;
}

div#menuPane{
    position: absolute;
    left: 25px;
    top: 25px;
    width: 25%;
}

div.menu {
    display: block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    border: 2px solid #7FC07F;
}

div.menu a {
    display: block;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    letter-spacing: 1px;
    margin: 0px;
    color: black;
    border-top: 1px solid #487048;
}

div.menu a:link{
    background: #33CCFF;
}

div.menu a:visited{
    background: #33CCFF;
}
div.menu a:hover{
    background: #3FC73F;
    letter-spacing: 2px;
}

div.menu h4{ 
    padding: 2px;
    margin: 0px;
}

div#content{
    position: absolute;
    left: 30%;
    top: 25px;
    width: auto;
    border: 2px double #7FC07F;
    background-color: #33CCFF;
    padding: 2px;
    margin-right: 5px;
}

div#content h3{
    background-color: #A3F4A3;
    text-align: right;
    letter-spacing: -1px;
    color: #386938;

    border-bottom: 1px solid black;
}

div#content a:link, a:visited{
    background:#0099FF;
    color: #A3F4A3;
    letter-spacing: 1px;
}

div#content a:hover{
    background: #FF0000;
    color: #A3F4A3;
    letter-spacing: 1px;
}   

Answer 1

Think of ID like your Student ID. Only one exists in your school - yours. Think of class like a group of kids...all of whom belong to the same class: "Biology". If you want to address a specific student, you would do so by acknowledging his/her ID - since that will never address more than one student. If you wanted to address a group of students, you could do so by acknowledging their class - "The biology class will be enjoying pizza today" vs "Jonathan Sampson will be enjoying pizza today".

<students>
  <student id="jonathan-sampson" class="biology" />
  <student id="lizza-matthews"   class="earth-science" />
  <student id="michelle-andrews" class="biology" />
</students>

Takeaway:

• ID = Student ID (Schools don't issue identical IDs to multiple students)
• CLASS = Group of Students (Like 'The Biology Class' will be going on a fieldtrip)

Answer 2

It can only be assigned to one element in the page, but it can be used in multiple CSS rules. Class names can be assigned to multiple elements in the page.

Answer 3

See this answer for a description of the differences.

Generally speaking, you use id's for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.

Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style h1.error {} which would only apply to

Answer 4

One final note -- some browsers will allow multiple identical "id" values, but you should definitely not do this as it is will break on standards-following browsers.