The diffrence between an ID and Class was something I was largely ignorant too for some time at the beginning of my jumping onto the CSS bandwagon and abandoning tables for layouts. I used them both, probably incorrectly, but stuck with class for most of my layouts. It took a while before I even bothered to inquire as to what the diffrence was between id and class, and lucky for you I’m going to share that morsel of knowledge.
- ID, using the # sign in your CSS, is for items that only appear once per page, like your header, logo, navigation, footer, ect. Use ID when you can, and class when you can’t. ID’s are also signifficant in javascript using
getElementById(). - Classes, using a period in your CSS, is for anything you would have multiple times in your document like headlines.
Here is an example of the two in action.
[sourcecode language='css']#navigation {
width:100px;
float:right;
}
.headline {
font-weight:700;
}
[/sourcecode]
Any questions about your own mysteries of CSS?
Its rather funny you mentioned it, as I just started seriously studying CSS this week. Basic layout makes sense to me, but there are two effects related things I'm trying to find out.
1) How to make both tabs and content areas with rounded corners with no XHTML markup, and preferably no JavaScript.
2) How to use images to create a fun looking edge for a content area.
Since I've never really sat down and learned CSS, and I just try to play around, and do what i need to do within already existing templates, I have never known the difference between these 2… thank you so much for breaking it down easily…
I did exactly what you did…
actually i have learned their difference just recently through a subject in college…
I wrote an article about this last year entitled The difference between an id and a class in CSS
When I first started using CSS I was still curious as to why you should use IDs at all. I mean, even if you were using a class once why should you use an ID instead of a class.
I later learned the main reason, you can link to IDS. Identifiers can be linked to within a document. WordPress uses this. If you check your comments.php template you should see the unique identifier 'id=respond'. This id allows the reply form to be linked to from within the page and from other pages (like the home page). It basically works the same as any anchor eg. the most commonly used one on the web is the link to the top of the page. It works in the same way.
Thanks for the clarification–and Kevin's response. My thought too was why use IDs at all. Thanks for bringing to light the differences.
I was about to say what Kevin said…hehe. Regarding linking to an ID, that is. I too discovered it by accident back when I started looking into a WordPress theme. Good thing I did, because I might have coded themes without id=respond otherwise.
You could also use getElementByClassName() or something like that, I think
[I'm not a JS ninja, just a CSS/HTML guy. Sorry if it is mispelled.]
Ok, now that John’s here, I’m sure I’ll atleast see occasional technical posts that I’ll be interested and will comment on. +1 for BT, now all it requires is more technical articles and thoughts from ‘da man’ of BT. (Kevin, in case you’re wondering). Here are my two comments about this (1, 2).
PS: Kevin, I think you should have the comment preview plugin. Helps me and others see that the comment (especially HTML within it) isn’t messing up or something.
I think I have to do some CSS studing! :p
I didn't knew it before! Thnx for the information!!
I also think this these elements have a different "weight" assigned to them… Like if they are conflicting with eachother, for whatever reason, the ID overlaps the Class… of course this may be only with my experiences!