I'm still confuse as to which one to use. id or class? anyone got a simple explanation?

An id can only be used once on a page, so only use an id if you know you only need to use it once. Other than that they effectively do the same thing, and I know some people use only classes and never ids (although I don't think this is good practice).

I wrote a little article about them and their differences a couple of weeks ago if you would like to have a read

 

http://webdesignpond.co.uk/wdp/tips-tutorials/class-or-id/

An id can only be used once on a page, so only use an id if you know you only need to use it once. Other than that they effectively do the same thing, and I know some people use only classes and never ids (although I don't think this is good practice).

 

But visiting csszen, the html code contains a lot of <div id's and only the <p's contain the class.

Each of those divs will require unique styling which is why each one will have its own unique id name. When I say you can can have only one id per page, I mean id name ie <div id="hello"> . You cannot have another id with the name "hello", but you can have other ids with different names. With the <p> tags you should notice that each <p> tag with the same class name has the same styles applied to it. Hope this sense I have had a bit of wine

Another thing to bear in mind is that an id has more weight than a class with regards to specificity. For example:

CSS

#intro {color:#f00;}
.whatever {color:#000;}

HTML

<p id="intro" class="whatever">This is going to be red</p>

For an item you only use once on the page, you use ID.

For an item you use multiple times on the page, you use class.

 

Simple but hopefully good answer. xP

It's beginning to makes sense to me now.

 

Many Thanks.

Great article Dizi.

I don't know whether you were asking about CSS specifically, or web languges in general. Since no-one's mentioned it yet, I'll give you a quick run-down of the differences when it comes to JavaScript.

 

To locate an element by it's ID is very easy:

document.getElementById('theID')

At the moment, there is no in-built way of getting elements by class name. Some browsers have their own techniques and implimentations (and names!), but not all do. If you want to get a range of elements by their class name, you'll probably have to find a function that will scan all elements on a page and keep a track of any that have a matching class name, or use a library with a selector-finding function

Good article, Dizi.

+1

Yeah good article + 1