CSS ID vs Class

Regarding class selectors vs id selectors:

when creating a box with CSS is it more appropriate to write that as an ID or as a class? For instance, lets say you have a navigational box that is 200px by 100px on the left side of the screen, only used for your site navigation. Should that box be written as a class or as an ID? Or, does it really matter at all?

Mark

I've decided that ID and class should be used for organization.

Say you have four tables that you all want to have almost identicle looks, except the font, but instead of copy and pasting the css thrice, you can use id's like so:



That way you can change the minor aspect without having to have three times as much css.

An ID is typically used for a single instanced container/object, while a class is applied to many objects.



i think.

That is exactly right.

ID = One Instance
Class = Multiple Instances

hence the terms,
ID = one student.
Class = many students.

well now, isn't that clever! i never would have made that connection, but it does make sense now.

what defines a single instance? Is it a single instance per site or single instance per page?

mark

Per page.

Me either lol, this topic made me think of it
Actually i usally use class for styles and id as javascript reference, EX:
(note i know i forgot some things)

You can still use ID CSS'ing more then once correct? like have two tags with an ID of 5, even though that isn't what it is meant for I am sure it can be used that way.


I think in the Minds of CSS the properties probably go like this:

Tag
Class
ID
Inline


I'll check w3c later...wanna go play some xbox and make a Van deGraaff generator

i'm sure it would work, but i don't think you're supposed to. i wonder if it would validate to use an ID more than once?

Mark

W3C Says exactly what we have said, ID must be unique, that doesn't mean it wont work, but it wont be to standards.

http://www.w3.org/TR/REC-html40/struct/ ... -and-class

I tried it just to see what would happen, and it works with CSS, but the document won't validate if an id is used more than once within that document. In other words the style information is valid, but the html containing the multiple instances of the same id is not.

Another potential problem is that it won't work properly if you use javascript to access elements referred to by the same id. If there is more than one unique instance, only the first instance will be used and the others will be ignored (at least in IE6, Moz 1.5, and Opera 7).

I generally use class with CSS, since I may want to apply it to a different element within the same document at a later time, and id with unique elements that I want to access through code. The exception for me has been using css for layout, which is something I am learning. I have started using id with css for elements that are unique within a document by their nature (i.e. a column like "mainContent").

It would be poor programming practice to use the same id more than once in a document because by definition it is supposed to refer to a unique instance. You may also decide to access that id through code at a later time and get unexpected results. If you stick to the standards then you can use the W3C validator to spot errors in your code, which I think is extremely handy.

I avoid using both as much as I can.
Use the cascade!

care to elaborate for those of us who are n00bs to CSS?

mark

of course (although I'm a n00b too)!

The idea is to use the seclector part off each CSS rule to it's fullest potential...
for example, if all your links should be blue-on white in the body of your site, but white-on-blue in the navigation menu, most n00bs (and I think most WYSIWYG editors) would use add class="..." for EVERY link in the nav section, but if you can identify the nav section then you can set rules for any element that is inside the nav section, and so in your HTML code the links all look the same: