CSS ID's and Classes made simple.

A good understanding of the different roles CSS Id's and Classes play in a web page is fundamental to any good plan for a CSS styled website. There are many websites around that will tell you the difference in definition of the two but they don't really give you a good idea of why there are two things serving very similar purposes. Hopefully this article will fill that void for those who need to know.

It is important to know that an Id can only be used once per document but Classes can be used as many times as you need to. And, when defining Id's in your style sheet you must precede the Id name with a (#). When defining Classes you must precede the Class name with a (.).

Lets pretend we have a simple web page broken down into its main elements, say, a Header, a Side Bar, a Content section and a Footer.

Each of these sections will only show up once on the page. It is good to use Id's to hold style elements that will apply only to these sections. A good example would be if each section has a different colored background. One could easily have a style sheet that looks like this:

#header {background-color: #FF0000;}
#side-bar {background-color: #00FF00;}
#content {background-color: #0000FF;}
#footer {background-color: #FFFF00;}

Now lets say we want the text in the header and side bar to be blue. Since there are two sections on the page where we want blue text we will set up a class that will define blue text.

.blue-text {color: #0000FF}

And lets say in the header and footer we want padding to be 10px.

.padding-10px {padding: 10px;}

I want to point out for those who possibly don't know already that the names of the Id's and Classes can be anything but it helps to use something descriptive of whats being styled so that the code is easier to read. For example when I have ".padding-10px" that isn't special CSS code other than the fact it starts with a (.) meaning that I'm defining a class. I could have just as easily written ".some-padding" and accomplished the same thing. So you don't have to define your header Id as "#header" but when you look over your code it will make it obvious what styles are being used if the Id and Class names have some meaning to you.

Now lets jump to the HTML part of our web page and implement the Id's and Classes that we've made. For the header we will use a DIV.

<div id="header" class="blue-text padding-10px"> Content </div>

Each HTML element (ie. div or span) can have only one Id but can have multiple classes, just separate the classes with a space inside the quotes.

As you can see from this very basic example, Id's and classes can look very similar but serve specific functions in the overall end product. When starting a new layout take a mental picture of what you want the page to look like. Then sort the different parts of the page into two groups. Parts to be used once (like major page sections) and parts that will be used multiple times (text modifications, HTML element modifications, etc). Let the Id definitions hold the style code that is specific to the parts to be used once and let the Class definitions hold the style code that will be used over and over on different elements. And remember that you can add as many class declarations to your HTML elements as you need to get the exact look your after.

Of course we have to point out that these codes are designed to work on standards compliant browsers. MS Internet Explorer continues to not be standards compliant and can give you different results depending on the version of IE you are using.

If anyone needs a more clear explanation of anything discussed here or if you find an error, drop me a line. Now get back to work, the web isn't going to program itself (not yet anyways).