When it comes to styling pages, it can become a bit confusing trying to figure out where to use classes and where to use IDs. If you don’t know how to properly use them, it can cause you to write a lot of duplicate code in your CSS, and can make your styles hard to manage. Today, we’ll talk about how to properly use IDs and classes in CSS, and hopefully save you a load of headaches in the future.

This tutorial may help you to think of CSS classes and IDs in a way that is easy to visualize.
An ID is unique. No one has the same social security number as you; therefore, it’s a good way to ID someone. The same thing applies to HTML. In your documents, things that are entirely unique in themselves should be garnished with an ID. On the opposite note, we’ve all been in a Class of people before. For instance, a classroom called “Science” has several students in it. Each student may be slightly different, and could even have their own student ID if necessary. However, since each student was a part of the “Science” class, we can easily group them together. In CSS, when you have elements that share common attributes, you should apply a class, because those elements cannot share the same ID in an HTML document. Let’s take a look at this in practice.

STEP ONE:

HTML

Our HTML setup will consist of 3 Div elements. The “top” Div element will have a unique background color, whereas the bottom 2 elements will each share a background color and have some drop shadow applied to them. However, to get started, here’s what the initial HTML setup should look like:

Notice that in our HTML file, our bottom 2 div elements have 2 classes; “blue” and “shadow”. You denote multiple classes simply by adding a space between them. As you can see, since “div1″ is a unique element, we’ve given it an ID as opposed to the other 2 Divs that will share styles.

STEP TWO:

The CSS

Recall that any elements that will share styles should have those styles placed into a CSS class. This makes it far easier to style multiple elements than to give each one unique IDs and repeat the same CSS code over and over. However, before we go into our classes, let’s give “div1″ some unique styling. Here’s what the CSS file should look like now:

Now, viewing the HTML page in the browser will reveal a “purple” square on the page. This is good, and I promise this will be the only purple element for now. Notice that I’ve given the Div a height and width declaration as well.
Div 1 Style

Since all of our Divs will be the same height and width, there may be a better way to implement this which we’ll get into shortly. For now, let’s go ahead and add the styles for our classes; “blue” and “shadow”:

Now if you view the page in your browser, you’ll see that with those declarations, we’ve styled both of our bottom Divs. Again, we chose classes for the bottom 2 Divs because they both had to share more than one style. If we had styles that these Divs did not share, it may help to go back and give each one its own ID, that way styles will be applied to that Div only. I’ve thrown a little problem in here on purpose.
blue and shadow Classes with Style

You’ll notice that we’ve repeated the exact same height and width declaration 3 times in our CSS page. When you have elements that use the same CSS code repeatedly, this is when it helps to refactor the code and create a class for them. Let’s take our height and width declaration and put them in a new class called “scale”, and then apply that class to each of our Divs:

As you can see, adding the “scale” class has allowed us to delete all of the repeating height and width declarations in our CSS code. This is the essence of classes vs. IDs. When you have repeated code throughout your CSS, find the elements that have those styles in common and create a new class. This will keep your CSS code lighter and more manageable.

Now if you preview the page in your browser, we can see how the elements were styled.
Final Result

Knowing when and how to use CSS IDs and classes can mean the difference between easily manageable websites and completely unreadable, unmanageable spaghetti code. Using these techniques will enable you to better keep track of your styles, as well as to code more efficiently. Join us next time when we learn to create a simple navigation bar in CSS. See you then!

Download Source Files