ID vs CLASS in CSS. Please explain in detail with example

Question

I have heard that ID is unique and can only be used once in a page, but its working fine when used over multiple times on a page. Please let me know the purpose of ID and hows i

Answer 1

Confusion abound here. Turns out, everybody is kinda right. Here are the facts:

 1. CSS doesn't care much which you use, as far as actually applying
    styling. ID's are technically faster for a browser rendering engine,
    but other than the most extreme of circumstances you'll probably
    never notice a speed difference
 2. . JavaScript cares very much about ID's. It can be noticeably faster
    for JavaScript to find an element by an ID. And this is where the
    "uniqueness" is very important. JavaScript will only find the
    "first" element with that ID, so if you have multiple on the page,
    confusion may ensue.
 3. ID's have an infinitely higher specificity value than classes. If
    there is an element with an ID and a class and they both apply
    styles, the styles applied by the ID will take precedence over the
    styles applied by the class. This can be useful, this can be a
    hindrance.

here is simplest example

#id    { color: red; }
.class { color: green; }

It's just an attribute and it's a seemingly arbitrary difference in syntax depending on which one you use. The results are predictable:

Would be red
Would be red