One of the most confusing aspects that most fail to grasp the concept of is the id and class selectors. What is the difference, and what should be classes, and what should be an id? In this small post I’ll attempt to explain the difference, and then give examples of why to use each one.

You should know this already, but for those that don’t, an id is shown with a #  and a class starts with a period . Example:
ID = #wrapper
Class = .wrapper

 The main difference:
ID - Can be used just once in an (x)html document.
Class - Can be used unlimited times in an (x)html document.

So, why do we not just use classes all the time and save ourselves confusion? No one really knows why, but it has become regular fashion to mix both into a document, and it does make sense. Usually, when designing a site with CSS, designers have divs with important areas in, such as:
Wrapper [Also known as ‘container’] (Wraps/Contains everything in the document)
Navigation (Contains site navigation)
MainContent (Contains the main text/content on a page)
Footer (Contains the footer)

There may also be more, but those tend to be the main ones. Usually these are styled with ids. The reason being that, you will not have more than one footer, or more than 1 navigation bar/column. So, we use Ids. The Layout Divs are nearly always ids. They will only be used once. Things that might be classes are:
newsitem (A latest news paragraph of text)
newsheader (A header with latest news)
emphasis (A selection of text that is emphasised (eg: bold, large, italic)).

For example, you might have something like this:
<div id=”wrapper”>
<div id=”nav”>
nav here…
</div>
<div id=”maincontent”>
<h3 class=”newsheader”>News!</h3>
<p class=”newsitem”>blah blah blah</p>
<h3 class=”newsheader”>News!</h3>
<p class=”newsitem”>blah blah blah</p>
</div>
<div id=”footer”>
copyright to me!
</div>
</div>

That’s a typical example. Notice that any ids are used once, whilst classes are repeated. If you now understand that, then you understand the difference between them and how to use them. Well done.

Categorised under: CSS, Tips & Tutorials by Jack F