printer friendly version

Formatting using classes and ID's

This tutorial teaches how to use classes and id's in formatting more tags of the same type in a different way.

Deciding when to use classes, and when to use id's

You know what classes in real life are - we put things into classes according to their properties. We can divide HTML tags into classes, so that we could format two similar objects in a different way. However, a class can hold more than one element, so you can have plenty of elements on your webpage that will be of the same class.

Id is an identification of tag which refers to exactly one tag - this means you must give a unique id to each tag.

Knowing this, decision is easy - use classes when you know you will have more elements that will use the same format, and use id's on elements that are unique in the document - like a div layer you use for positioning, footer etc. Also, there are tags that won't be given a class or id, because it isn't necessary.


Imagine you have a webpage - let's say it's background is white, and we have a navbar on top, which is colored dark blue. The links are in the navbar and the text is in the content section (duh!), but you might also put some links in your body text, and some titles in your navbar. If you formatted the links in CSS to appear white, that would look good on the blue background, but on the white one they would seem invisible. We could also format the text to become black, but then the text in the navbar would appear hardly visible. Instead of wrecking your mind to find colors that would fit both on the blue and white background, we can define two classes for div tag in the CSS. Let's call one of the classes "nav", and the other one "content". This is how the CSS code would look like:

div.nav {
	color: #CCCCCC;
	text-align: center;
	font-size: 12px;
div.nav a {
	color: #FFFFFF;
	text-decoration: none;
div.content {
	color: #000000;
	text-align: left;
	font-size: 11px;
div.content a {
	color: #000066;

.nav refers to the div of class "nav", and .nav a refers to all the a tags inside that div tag. The same works for .content.

After you've added that CSS, all we have to do is to put the navigation in a single div of class "nav", and the content in the div of class "content".

Code for the navbar:

<div class="nav">
<a href="page.html">LINK</a>
<a href="page.html">LINK</a>
<a href="page.html">LINK</a>
<a href="page.html">LINK</a>
<a href="page.html">LINK</a>

Code for the content:

<div class="content">

Now we have blue navbar with white links, and the rest of the page white with blue links.


Id's are useful when we have exactly one element on which we want to use special formatting. Let's say we have a CSS layout, and everything is within one div (named "container") that will be positioned 10 pixels from the top and 15 pixels from the right. CSS looks like this:

div#container {
	position: absolute;
	top: 10px;
	right: 15px;
	margin: 0px;
	padding: 0px;
	border: none;
	text-align: left;

The HTML code for that div will look like this:

<div id="container">

I hope you didn't have any troubles following this tutorial, and that you realized how useful classes and id's really are :)

Share this tutorial with your friends!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business