Id Vs Class - What's The Difference?

ID and class selectors are both used to identify and select html objects, such as a div, an area of text, an image, a link etc, that you want to apply styles to.
They both function in a very similar way, so you'll be forgiven for wondering why it makes a difference which one you pick.
You should note that applying a Class or ID (With no predefined styles) to something, doesn't actually do anything by itself, if no styles are applied to the ID or Class then nothing will change and it will look exactly the same, as if you did nothing at all.

IDs:

The main difference is that an ID may only be used once per document, but a class can be used many times (As many time as you want infact).
Why does this matter? Because it helps you to structure your pages correctly.

For example, large sections of a webpage that are completely different from anything else will probably call for the use of an ID, this is because you wont ever have more than one of those objects, a footer would be a good example. On any one webpage, you probably will only have one footer, so it makes sense.

But what if you want 2 sidebars, they'll both have the same dimensions and properties? Well that's partially true, in most cases websites will have sidebars of equal size (If they have two, one on the left and one on the right), however the main difference is that they are on different sides of the page, making them unique, one will be floated to the left and one will be floated to the right (Unless you want to set up your sidebars in some other fashion).

The IDs were used to build parts of the main structure of the webpage layout, ("sidebar1", "sidebar2" and "main content" divs). If you don't know what divs are, check out article on divs to get a full explanation of what they are and how they're used.
Notice that I didn't use "sidebar-left" and "sidebar-right" as the names for the sidebar divs. The simple reason is that I may change my mind one day and swap them around. It's best to name your divs with descriptive names and perhaps what will be in them, rather than their placement, which will possibly be subject to change.

In a css document, ids are represented by a hash (#), so an id named "content" would look like this:

    #content {
        **Insert your styles for content here**
    }

Classes:

Classes are used for objects that will appear many times throughout a webpage, such as the items in a navigation bar. You will probably want to present all of the navigational items in much the same mannor. In this case, many ojects will share the exact same properties, so a class is appropriate.

In this case a class called "navigation" has been applied to an unordered list, that will function as a navigational menu (They're just standard text items rather than links, just to keep it readable).
You will want each link to look exactly the same, in terms of colour, margin from the left, padding, hover effects etc. If you wanted to use IDs, you'd have to give each one it's own ID, but unless you want each link to look completely different from the others, this is an inefficient use of IDs, a class would be far more appropriate as it will allow you to firstly, keep all of the links looking the same, and secondly it will allow you to change the appearance of all of the links all at the same time.

In a css document, classes are represented by a dot (.), so a class named "smallBox" would look like this:

    .smallBox {
        **Insert your styles for content here**
    }

How To Remember The Differences:

The easy way to remember which one to use is this:

Imagine a classroom full of students, each student is completely unique, they have their own individual properties that when changed have no direct effect on any of the other students, so imagine a student as an ID, however the classroom has many people within it, a change to the classroom effects many people, so imagine the classroom as a class.

Unique Student = ID
Classroom that effects many people = Class

Why Should I Bother Sticking To The Rules?

i.e. IDs can only be used once per document.

If you don't stick to the rule of one ID per document your page wont validate. "So what?", I hear you say, if your page doesn't validate then it might look a bit crazy in some browsers (But even if your page does validate there's still a chance of that happening due to poor browser css support, something that I'll cover in another article).

If you have an ID called "content" and direct your browser to "www.mywebsite.com#content", the browser will attempt to scroll to an ID on the page called content. Now I've never experimented with this, but if you don't follow the rules and have 2 or more items with the same ID, it's safe to assume that this function wont work as expected. It will probably just scroll to the first or last instance of the "content" ID that you specified, but obviously not both!

If you every use or plan on using javascript (And you should), then having a unique ID is very important. If you want to manipulate a specific ID, but there are more than one of them, it would behave in a very unpredictable manor.

More importantly, could it effect your search engine rankings?
While no hard proof exists (That I know of) that valid coding currently effect your search engine ranking, who's to say that it never will?

Think about it, if a search engine sees two webpages of equal relevance, doesn't it make sense that the one that contains more valid code will get a very slight bump in rankings? I personally think it may, as one webpage is closer to a truely correct webpage than the other, therefore (In a way) more relevant.

So in conclusion, if you have many objects that you want to display in the exact same way, use a class, otherwise use an ID, and if you don't need a Class or ID, don't use one just for the sake of it.
When first setting up your webpage layouts, you will probably use DIVs as the main structures and since each of these will generally be unique, you can use IDs.

If you enjoyed this article, please consider giving it a +1

Tags: css, id, class

Published: 5/12/2014 8:20:05 PM
By: Stephen Warren