The difference between an id and a class in CSS

Newbies to CSS might be a little confused as to the differences between classes and ids. I thought it would be good to write a post about this and help clarify these differences.

Both ids and classes allow you to structure and display your site and information the way you want. However there are two very small differences between classes and ids.

1. An id identifier can only be used once in a page/document whereas a class can be used as many times are needed.
2. There is a small diference in the way identifiers begin in the css doument. Specifically an id begins with a # and a class begins with a dot/period – ie a .

Here is an example of each to help you understand the difference between an id and a class in CSS.

An example of a Class in CSS

Classes allow you to quickly manipulate how the information on your page is displayed. For example, say you are writing an important article on your site and you want to highlight or stress certain parts of the article. You can use a CSS class to do this. In this example i have dedicated to highlight important information by making important words and sentences appear in font which is red, italic and large.

The CSS code for this would like this :


.redtext {
font-size: large;
font-style: italic;
color: #ff0000;}


Here is an example of how this could be used in a page :


'This is my very important article. I want to talk about a lot things but i specifically want to talk about <span class="redtext">this thing</span> and if i have time i would like to talk about <span class="redtext">another thing</span>'


The most important thing to remember about CSS classes is that they can be used as many times as you want

An example of an ID in CSS

There are many parts of a website page which are unique. CSS ID’s were designed for these areas. For example, say we have a main menu on the left hand side of every page of our site. We can determine the look of of this menu by using a CSS ID.

Here is an example of how the code would look like in our CSS document :


#mainmenu {
width:200px;
background:ffffff;
border :2px;
}


In our website page we can then display our main menu by using something like this :


<div id="mainmenu">
main menu information and links would go here
</div>


Remember, a CSS ID begins with a # in the CSS document and not a period and the ID container can only be used once.

Summary

Both of these examples show very simple CSS code. I didnt want to overly complicate things and highlight the main differences between these two CSS identifiers but im sure you will realise how helpful these identifiers can be. Both of these examples could be extended, for example we could have extended the ID code to make the links in the main menu a certain color or size.

I hope this will help some of you out there but if you have any questions please let me know

thanks,
kevin

Written by Kevin Muldoon from Blog Themes Club
Posted on March 25th, 2007 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

4