CSS Class and ID

py2006

Hiya,

I am looking for a logical and simple explanation and example of the different class selectors withing CSS. I know what they do (to a certain extent) but I find that when I try to explain them to others I don't do a very good job of it.

Anybody have a simple explanation for when each is used?

Cheers!

doopa

w3schools definition explains it well for me:
http://www.w3schools.com/css/css_id_class.asp

py2006

ID:

{ #main: color:blue; }

[HTML]<div id="main"> This is blue text </div>[/HTML]

Class

.firstparagraph {color: red; }

[HTML] <p class="firstparagraph"> Howya doin </p>[/HTML]

Tag

p { background-color: black;}

[HTML] <p> This paragraph has a black background </p>[/HTML]

Liam Byrne

py2006 wrote: »

Hiya,

I am looking for a logical and simple explanation and example of the different class selectors withing CSS. I know what they do (to a certain extent) but I find that when I try to explain them to others I don't do a very good job of it.

Anybody have a simple explanation for when each is used?

Cheers!

ID (hash notation prefix)
If a university lecturer wants to call a particular pupil, they can call them by their name, but (since 2 people could have the same name) they'll call them by their ID.

CLASS (dot notation prefix)
If the lecturer wants to call the class (a group of people/elements) then they'll use the class, and therefore that group of multiple elements to be acted on in unison.

TAG (no notation prefix)
If the lecturer wants to call "all boys" or "all girls" they'll use the tag, again allowing multiple elements to be acted on in unison.

p

What the others said. I'd add:

IDs are things that are unique and only appear once on a page. e.g. #header or #footer, whereas classes are something that appear many times. e.g. .product or .news-item

Overall though, I always tell beginners to just uses Classes. There's very little advantage(if any) in using IDs, except for your own organisation.