Difference Between Id and Class in Css, and When Should I Use Them

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.

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.

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.

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>

HTML & CSS: When to use ID and Class?

This is not a good question for StackOverflow and I recommend in the future that you use google before asking questions.

The key difference between classes and IDs are ID's are unique. Classes are not unique.

You can use any number of classes per element. ie: class="btn btn-primary" but you have only have one ID per element. ie: id="button-23".

The biggest difference comes into play when you start using Javascript to interact with the DOM. If I use document.getElementById("button-23") and you have 2 elements with that ID, Javascript will only interact with the first one it encounters.

In general, in my opinion, especially when you are starting out, stick with classes and don't use IDs.

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

When to use id and class in html/css

ID and CLASS, both can be used for same purpose but its not a good practice for web designing.

ID is used to uniquely identify any element.

But class is used to identify a group of same type of elements.

Hope it is clear now.

Best of luck

How to choose between `class` and `id`

Use id to identify elements that there will only be a single instance of on a page. For instance, if you have a single navigation bar that you are placing in a specific location, use id="navigation".

Use class to group elements that all behave a certain way. For instance, if you want your company name to appear in bold in body text, you might use <span class='company'>.

---

Related Topics