CSS Classes

Look at this running example.

HTML:
<img src="images/image1.jpg" alt="image 1" />
<img src="images/image2.jpg" alt="image 2" />
<img src="images/image3.jpg" alt="image 3" />
<img src="images/image4.jpg" alt="image 4" />
<img src="images/image5.jpg" alt="image 5" />

These 5 images are all on one HTML page. I want the middle image to have a 5 pixel border. If I use a global selector:
img { border:5px solid red; }
then all of the images will have the 5 pixel border. This is where classes come in. Take the HTML for before with a tiny addition:
<img src="images/image1.jpg" alt="image 1" />
<img src="images/image2.jpg" alt="image 2" />
<img src="images/image3.jpg" alt="image 3" class="my_class" />
<img src="images/image4.jpg" alt="image 4" />
<img src="images/image5.jpg" alt="image 5" />
Notice how the third image now has a class linked to it.

Now for the CSS:
.my_class{ border:5px solid red; }

Now, if you view that code in your browser the middle image will have the red border.

CSS IDs

Very similarly you can use CSS IDs to reference a SINGLE unqiue HTML element. This is good for things like website logos, footers and layout elements. Specific elements that you know will only ever appear once on the page.

Look at the following example of a page layout:
<div class="container">
  Some content here
  <div class="footer">
    <div class="copyright">
      CSS Master
    </div>
  </div>
</div>
And the CSS for this…
.container {
  margin:0 auto;
  width:900px;
}
.footer{
  background-color:#333;
}
.copyright{
  font-size:11px;
  color:white;
}

My page will only ever have one footer, and it will only ever have one copyright notice. It may, however, have multiple containers. So, let’s revise the HTML.
<div class="container">
  Some content here
  <div id="footer">
    <div id="copyright">
      CSS Master
    </div>
  </div>
</div>

You reference the elements in the CSS in a very similar way, but you use a hash (#) instead of a period (.) for the ID name.
.container {
  margin:0 auto;
  width:900px;
}
#footer{
  background-color:#333;
}
#copyright{
  font-size:11px;
  color:white;
}

Note how our container is still a class (.container) but everything else is using a hash # so must be an ID.

Why Not Just Use Classes?

ID’s speed up performance. The browser will know it only needs to style the one element with that specific ID the once, so as soon as it has been loaded the CSS can be cast away. If you use classes for everything then your browser will be using up more memory and resources than it needs to.

Using ID’s instead of classes also makes it easier to work with. If you’re trawling through a CSS file with 1,000 lines in there, you can quickly see which are generic styles, classes and IDs. You know that the generic styles will be looking after your general elements, your ID’s are looking after your layout and static elements and your classes

Notes

Be careful with your reference names. DO NOT start a class or ID with a number as a lot of browsers can’t read them properly.