CSS Classes and IDs - an Overview - CSS Tutorial

Using CSS Classes – A Handy Guide

We come now to a principle of CSS which will pretty much affect everything you do when building a website. This issue surrounds how you name elements on your page.

We’ve already seen that HTML Tags and CSS are directly related. This allows you to define how a tag looks or behaves by using the tag name directly in your stylesheet:

tag{
 /*
  Appearance and function changes go here.
 */
 name:value;
}

But you often need more control than to just make every instance of one tag the same. If all the cells of a HTML Table were styled the same, it would look boring. You might want certain data to stand out in some way, for example.

So CSS gives us two different naming conventions we can use – CSS Classes and IDs.

CSS Classes – When To Use Them

When you have repeated elements on a page that should have the same look and feel to them, you should use CSS Classes. To do this requires two steps:

Step 1 – Add Class to Your HTML

Before you can update your CSS to affect your HTML page, you first have to mark up the elements in question with a class="class-name" attribute. Here’s an example:

<div class="box">
 Box 1
</div>
<div class="box">
 Box 2
</div>
<div class="box">
 Box 3
</div>

In this instance I want to create 3 squares of equal size. Maybe I want to start an image gallery off, or put images in HTML Links as click-throughs to other pages. The important thing is I want them all to appear the same way.

Okay, now we’ve set up the HTML, let’s see what we need to do in our CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#ddd;
 margin-right:10px;
}

To set the rule for a certain tag with a class, instead of just defining tagname{ } we have tagname.classname{ }. The fullstop/period between the tag name and class name is what defines it as a CSS Class. Also note there are no spaces. If you put a space in your rule probably won’t work how you planned – the reasons for that will have to wait for a forthcoming tutorial on CSS Hierarchy. But for now just ensure you omit spaces.

In this example have used margin-right:10px;. This just ensures my 3 boxes have a space of 10px between them. The other attribute we’ve not covered yet is float:left;. I want to cover floats and page layout in the next tutorial, but for the purposes of this lesson, just understand that this ensures the boxes all sit to the left of each other, rather than one under the other.

This combination should give you something that looks like this:

Box 1
Box 2
Box 3

Well done if it has!

If you don’t specify a class

Just to show you that your class box only applies where you want it to, place an additional <div> after Box 3:

<div>
Box 4
</div>

Refresh your page. You’ll see that although the word div is in your CSS for div.box, because you have not specified class="box", none of the rules set in div.box{ } are applied.

And that’s why it is more flexible than simply using tagname{ } because you can have multiple instances of a tag, but only those with the relevant classes have those attributes!

Using More Than One Class

It is rare in modern web design for an element to have just one class. That’s because in order to code efficiently you want to re-define things as infrequently as possible. Let’s take our 3 boxes and see what happens if you want to recolour each of them.

To specify that you want to use more than one class in your HTML you simply add the next class after a space. Like this:

<div class="box red">
 Box 1
</div>
<div class="box green">
 Box 2
</div>
<div class="box blue">
 Box 3
</div>

Cascading Note:

Because CSS styles Cascade the order you place your classes matters. So in this instance we want the rules for class="box" to be applied before the class="red". If you reverse this order, then the rules for class="red" would be applied before the rules for class="box". Hopefully that’s clear enough!

So let’s extend our CSS:

div.box{
 height:200px;
 width:200px;
 text-align:center;
 font-size:14px;
 color:#090;
 background-color:#dddddd;
 margin-right:10px;
}
div.red{
 background-color:#ffcccc;
}
div.green{
 background-color:#ccffcc;
}
div.blue{
 background-color:#ccccff;
}

Because each of our three boxes has the .box class, they are all given all the properties for div.box. But because each box has a separate class red, green, blue they are also given the additional classes. The end result is this:

Box 1
Box 2
Box 3

Note: although the div.box class does define background-color:#cccccc; because the colour classes are specified after it – e.g. class="box red" – the background-color specified in the div.red overwrites the one in div.box. This is what is meant by Cascading – CSS follows a ‘top down’ logic – or when specifying classes HTML, a ‘left to right’ logic. Try reversing your classes on one of your boxes and see the outcome!

CSS Classes When Making a Website Layout

I’m going to cover a basic page layout in one of the next tutorials, but for now, you should consider what elements on a page might need classes. Here’s some thoughts to get you started:

  • Any images you want to be thumbnails or product photos, you might want to be forced to be square: e.g. img.thumbnail{ width:200px;height:200px; }
  • Links you might want to turn into buttons should be different from just normal in-context links e.g. a.button{ }
  • You might want to apply a different hover colour to links in your navigation: e.g. a.nav:hover{ }

TL;DR CSS Classes

Effectively using CSS classes allows you to give an element on your page a name that CSS understands. Using these ‘names’ you can apply one set of rules to multiple instances of an element without repeating your Cascading Stylesheet definitions.

And because they cascade, the order you place your classes in your HTML does matter, so watch out for that.

If you have any questions, feel free to use the comments box!

Spread the Word

Share This On Facebook Share This On Twitter Share This On Linkedin Share This On Google Plus Share This On Pinterest Share This On Mail

Leave a Reply

Your email address will not be published. Required fields are marked *