Difference Between Classes and Ids in CSS? Explain with Example of Where to Use

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 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.

What is the difference between classes and IDs in CSS? Explain with example of where to use

IDs are meant to be unique, while classes are better for a "type" of element.

So you might have something like:

<ul id="menu">
....
</ul>

Because you will probably only have 1 main menu on your site.

For classes, however, you might have something like:

<span class='author'>Paolo Bergantino</span>

Or perhaps to style the div that contains an answer on this site:

<div class='answer'>....</div>

Because there will be multiple of these per page, they are a class of elements. Think of an ID as the social security number of an element. Whenever an element is important enough and is unique, you give it an ID. This also helps with dynamic websites as selecting elements by ID is by far the fastest way, and if you have multiple elements with the same ID (thus violating this practice) Javascript won't work as intended.

Difference between id and class

The biggest difference is that a document can have multiple elements with the same class, but not with the same ID. An Identifier must be specific to a certain element within a document (i.e. full HTML page).

When applying CSS styling, some experts have recommended using classes over IDs to avoid specificity wars. CSS Lint (http://csslint.net/) recommends this.

The reason is that stylesheets are read from top to bottom, but IDs take precedence over class. This means that:

#stockexchange-id { 
  color: blue;
}

.stockexchange-class {
  color: red;
}

Would color the text blue, even though red comes later. Here's a good graphic explaining specificity: https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg.

If everything has the same specificity, and most styles are applied via a single class, it makes the CSS easier to reason about, since it will read from top to bottom without extra styles being mixed in different orders. It also makes it easier to override classes, which can be useful.

Finally, if you style based on classes, you can re-use the styling on the same page by applying the class to another element on the page. With IDs, since they are unique, you cannot do this. Even if you think an element is unique on a page (e.g. a Buy Button), this may not always be the case. A designer may request the same element again later in the page.

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

I have heard that ID is unique and can only be used once in a page

That is an HTML rule and has nothing to do with CSS.

but its working fine when used over multiple times on a page.

Browsers perform error recovery. Don't depend on it as not all browsers will recover from all errors in the same way. Write valid markup.

Please let me know the purpose of ID and hows its exactly different from classes?

In HTML terms — an id is unique per document and can be a link target. A class can be reused.

In CSS terms — An id selector has a higher specificity than a class selector.

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

Difference between ID and Class

First of all, w3schools is a terrible resource. It is badly written, cluttered, unfocused, and frequently misleading. You should use this much better set of resources at the Mozilla Developer Network instead (it sets out to achieve the same thing).

Your example doesn't use classes at all. You have CSS invoking an ID, and 2 HTML elements with that ID (which you shouldn't do — IDs are supposed to be unique!). The key difference between the 2:

1. IDs reference unique elements. There should only be 1 instance of any 1 ID. Classes can be applied to many elements and an element can have multiple classes
2. A CSS rule using an ID will override a CSS rule with a class if they both try to assign the same properties.
3. IDs are used for all sorts of native applications: anchor references, forms, iframes, whereas classes are used purely for styling with CSS.

I modified your code as an example of these points. Here's some of that code using classes for reference:

.paragraph {
    font-style: italic;
    color: green;
}

And the HTML:

<p id="para1" class="paragraph">Blah blah blah</p>

What is the difference between classes/ids and custom HTML5 attributes in CSS?

Your active attribute example is invalid HTML, although it will usually (always?) work in practice because CSS is a separate spec that doesn't care about HTML's rules, and browsers try to do "what you mean" when it comes to invalid HTML.

Custom attributes should start with the data- prefix per the spec. These data attributes are usually used for associating an element with some extra data for use with JavaScript, although it's also possible to target them with CSS.

Technically, you could do something like

<li data-active="yeppers">

And then target it with CSS:

li[data-active='yeppers'] { ... }

However, that would be highly unusual and annoying for most anyone who had to look at your code.

Semantically, "active" isn't really data, and it's not necessarily unique to one element, so assigning class="active" makes the most sense.

Whats the difference between using .Class or #ElementId in CSS?

An ID must be unique in a document. Classes can be used in any number and combination. So you can use one class on multiple elements and multiple classes on one element.

---

Related Topics