ID versus class

@jlreichFeb 11.2005

Hello everyone. This looks like a good forum to hang around and learn.?

I have been designing my own site for over a year now. I first designed my site with plain HTML. BLOATED! About six months ago, I updated it to include CSS. Getting better but still using tables! And now I am in the process of totally redesigning from the ground up with no tables at all. ~~[I]~~Now[/I] were cooking with gas!?

What differences/benefits are there in using “id” or “class”? I have read through many tutorials in the past eight months or so, but have not found an adequate explanation.

I have tried it both ways, in both div tags and span tags, and don’t see any difference in the layout of my site. Or between Firefox and IE. And using the DOM inspector in Firefox, it will blink the same areas either way.

I have noticed in many sites, “id” will be used for div tags, and “class” will be used for span and inline tags, or vice versa. Is this just for organization and readability of the CSS text? Or is there a specific purpose for this?

Thanks in advance for any information.

to post a comment

CSS

9 Comments(s) _↴

@BonRougeFeb 11.2005 — #The difference is simple - id's are unique whereas a class is used when you want to style more than one element in the same way. This is the same as in English -your id is unique to you. If you belong to a class, there are others like you.

This is important too by the way.

@FangFeb 11.2005 — #An [i]id[/i] must be a unique value in the document, i.e. id="content" can only occur once in the document.

[i]class[/i] value can be used an infinite number of times.

@jlreichauthorFeb 11.2005 — #Thank you both. That clears up the difference between the two.?

One question though. Why would you need to assign a unique id to something? Forgive my lack of knowledge.

@BonRougeFeb 11.2005 — #Semantics for one thing. If you have a footer on your page, it's simply wrong to give it class="footer" because you only have one footer - it's not part of a class at all - it is the only footer on the page.

Besides just being right, there's also a technical side to it. If there are style conflicts - for example a div could have an id and a class with different border widths - the id style wins.

@PittimannFeb 11.2005 — #Hi![i]Originally posted by jlreich [/i]

[B]Why would you need to assign a unique id to something?[/B][/QUOTE]In addition to what BonRouge pointed out: If you want to reference that individual element in a script, you can distinguish it from other elements using the id.

Cheers - Pit

@jlreichauthorFeb 11.2005 — #Ok, now I see the power and correctness of id. ? Especially with scripts. I guess I will have to make a couple of small changes in my code.

Thanks again. And thanks for the quick replies.

@PittimannFeb 11.2005 — #Good luck!! ?

Pit

@CarolWFeb 11.2005 — #Dear All,

Oh, my, your explanations are wonderful! I'm redoing my CSS from scratch; it's wildly bloated, so I'm re-doing it at the same time I'm changing from HTML 4.01 Transitional to HTML 4.01 Strict. Again, not knowing what I'm doing, but feeling my way.

At the moment, my site isn't officially open (I'm not submitting it to Search Engines till I have proper content in there as well as structure and whatever-else - CSS that's not so bloated, for instance). And I have a bit of code in my CSS that MstrBob suggested; love how he handled it, but it's only on a few pages - my Home page, and my Layout sketch page, and a couple of others, I think.

I'm trying to achieve a fluid layout in the middle area of the viewport, but the decorative background strip down the left side is fixed. So far, that's the only fixed element on my pages.

Also, I'm very much concerned with accessibility, and I'm getting very confused about that - for instance, where is the best place to put my navigation area?

I read somewhere (I think, on these forums) that putting the nav last is a Good Thing For Accessibility. Maybe I can hook up to it with links from other parts of the page? I haven't learned how to do that yet, though I feel as though I'm on the verge of learning. It doesn't look too hard, DaveSW contributed very helpful information a week or two (three?) ago, which I have yet to play with (but I saved it, and I'm also looking at the W3C Links and Anchors information).

At the same time, I'm celebrating having obtained my own domain(s); .ORG is right for me, but I may later offer a few commercial services, either mine or someone else's, so I went for both .ORG and .COM.

I don't think it's quite fully registered yet, and I need to check in with my ISP, which I'm about to do. You could try, if you want, and you can see my layout sketch with questions (still in HTML Transitional with bloated CSS) at:

http://www.coherentdog.org/layout.htm

(or .COM)

and if that doesn't work, you can find it at

http://www.islandnet.com/~cwhitney/layout.htm

I guess my first question at this instant is, where is the best place to put the navigation area, if I have liquid layout for most of the page (the central part), and a few items at the bottom, as illustrated in my layout sketch, crossing the entire page (not part of the column structure).

(Is that even possible, or once I define the columns, do they necessarily run right to the bottom of the page?)

I guess it's a matter of structuring divs, is that right?

Sorry for the huge ramble; shows my confusion <g>.

And I think reading this thread has me considerably better oriented than before!

Many thanks to all of you.

Fri, 11 Feb 2005 15:51:32

@bokehFeb 13.2005 — #Hi!

If you leave things in the natural flow they work better with older or bad browsers. With my webpages I put the navigation in a <div> almost at the start of the body but just before it I inserted the following:

<p class="hide">Select this link to

<a href="#text">skip the navigation section</a>

and get straight to the interesting stuff.</p>

and I put this where I wanted it to skip to:

<a name="text"> First word of the text </a>

and in the css style sheet I put:

.hide {

display: none;

}

Meaning people running css can't see the link but people without css can see it and can use it to jump straight past the navigation section. Personally I like using unordered lists (ul) for navigation as this displays so nicely when css is switched off.

Also in #CSS _↴

flash of unstyled content Getting Table to Show on Top CSS Menu - Top list item not showing up in IE

Success!

Help @jlreich spread the word by sharing this article on Twitter...

Tweet This

ID versus class

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

ID versus class

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴