CSS Id VS Class

What is the difference between id and class in CSS, and when should I use them?

For more info on this click here.

Example

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5.
In CSS there is no "font-color", the style is color so the above should read:

Example

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

The text would be white.

What's the difference between CSS id selector and CSS class selector?

ID's are unique
Each element can have only one ID. Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements. You can use multiple classes on the same element.
More About

Why would I use an ID selector instead of a class?

There are several differences between ids and classes. Probably most importantly there is a semantic difference. An Id needs to be unique (actually you html is invalid if you use the same id twice in the document) and identifies special elements in your HTML Document, classes are there to group elements which have something in common.

1) Searching for id in the HTML Tree is faster than class because the css processor stops at the first matching element it finds. (Thus id css selectors are faster).

2) Ids and classes have different specificity. Since ids are unique in the document, they have higher specificity than classes. This is important in bigger projects where you have a lot of CSS rules where a lot of overwriting occurs.

3) The difference between classes and ids is even greater once you work with javascript.

Defining new elements leads you markup to be invalid, that's why the last option is not a good idea.

processing speed difference between CSS class and id

http://oli.jp/2011/ids/

ID's are faster in some cases, but not all

It’s a common belief that ID selectors are the fastest, but this comes with a big caveat: IDs are fastest CSS selector only if they’re the key selector. What’s that? Well, while you probably read selectors from left to right, browsers read them from right to left.

There's also a performance test here for your numbers request: http://oli.jp/2011/ids/#table1

Conclusion

ID's used correctly are faster, but with such a minimal difference vs classes - it's not worth any consideration.

It seems to me that there are no convincing reasons to use IDs in selectors for CSS styling¹, as CSS classes can do everything IDs can. Hopefully you’ll agree there are some good reasons not to. Think about it the next time you start a personal project or redesign your own site, and try adding a class (or ARIA landmark roles) for styling instead. Save IDs for fragment identifiers or JavaScript hooks

How do I give a CSS class priority over an id?

Do not use !important because it is the worst solution, if you want to switch the styling then do it that way.

#idname{  border: 2px solid black;}
#idname.classname {  border: 2px solid gray;}

<div id = "idname" class="classname">it is a test</div>

CSS Best Practice about ID and Class?

I guess they always use the id in examples because it's less ambiguous. You know that they're talking specifically about that one element and its styles.

In general, the rule of thumb is that you should ask yourself: "is there more than one element which requires the same style, now or at any time in the future?", and the answer is even "maybe", then make it a class.

Why ID has stronger meaning than Class in CSS styling even if declared before the Class

This is to do with the complicated world of "Specificity"...

ID's are more specific than classes and take precedence over them. This is because ID's have to be UNIQUE on every page...so they are by nature very specific. Classes can appear multiple times.

Learning how this works is fundamental to coding CSS. Some people say you should try to avoid using ID's altogether as they are so specific they tend to cut down reuse.

A rule of thumb might be to use ID's to identify large sections of your page, or important items and classes to attach styles to the other things.

These days with html5 we have <section>, <header> and <footer> whereas we used to use div's for those (with ID's normally) so these days the ID is used less than ever since we can target those things directly.

However consider ID-ing sections: <section id="mainContent"> for example is a fairly standard thing to do.

There are no RULES about how to specifically (excuse the pun) use ID's and classes. Just conventions that have built up over time.

see: https://developer.mozilla.org/en/docs/Web/CSS/Specificity ... here is a section:

The concept

Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of different sorts of CSS selectors.

How is it calculated?

Specificity is a weight that is applied to a given CSS declaration,
determined by the number of each selector type in the matching
selector. When specificity is equal to any of the multiple
declarations, the last declaration found in the CSS is applied to the
element. Specificity only applies when the same element is targeted by
multiple declarations. As per CSS rules, directly targeted element
will always take precedence over rules which an element inherits from
its ancestor.

What's the difference between an id and a class?

ids must be unique where as class can be applied to many things. In CSS, ids look like #elementID and class elements look like .someClass

In general, use id whenever you want to refer to a specific element and class when you have a number of things that are all alike. For instance, common id elements are things like header, footer, sidebar. Common class elements are things like highlight or external-link.

It's a good idea to read up on the cascade and understand the precedence assigned to various selectors: http://www.w3.org/TR/CSS2/cascade.html

The most basic precedence you should understand, however, is that id selectors take precedence over class selectors. If you had this:

<p id="intro" class="foo">Hello!</p>

and:

#intro { color: red }
.foo { color: blue }

The text would be red because the id selector takes precedence over the class selector.

CSS: #id .class VS .class performance. Which is better?

CSS selectors are matched from right to left.

Therefore, .videoContainer should be "faster" than #dialog .videoContainer because it misses out testing for #dialog.

However, this is all irrelevant at best - you'll never notice the difference. For normally sized pages, the amount of time we're talking about is so insignificant as to be nonexistent.

Here's a relevant answer by an expert that you should read: Why do browsers match CSS selectors from right to left?

CSS specificity, id vs class

While an ID selector does indeed provide more specificity than a class selector in CSS, that's not actually what's going on here, as the two rules aren't targeting the same element. What you're actually dealing with is a class selector that targets an element versus a style that is inherited.

.c3 has no rule that targets it directly, but inherits the parent colour from #id1, thus it is blue. Conversely, .c2 inherits the parent colour, and then has the class selector apply to it, overriding the inheritance, and causing it to be red:

.c2 {  color: red;}
#id1 {  color: blue;}

<div id="id1">  <li class="c2">test</li>  <li class="c3">test2</li></div>