[sho88]

Hey guys, I love CSS so much, I don't know why all websites on the Internet don't use CSS to some extent!!

Anyways, I was wondering, what's the different between div id and div class. I mean something like this:

(in .css file)
div.container

(in .html file)
<div class="container">



AND

(in .css file)
div#container

(in .html file)
<div id="container">


what exactly is the difference between the two?

This post has been edited by sho88: 05 January 2007 - 05:43 AM

[Karl Buckland]

An id should be given to only one element in your HTML. That id can then be used to identify that element and only that element.

A class on the other hand, can apply to as many elements as you wish.

Edit: (with information brought to light later in this topic)

Ryan Fait also points out that it's possible to use more than one class at a time on one element, but each element can only have one id.

Q. What is the advantage of identifying something through a css property? Why use id instead of class? etc
A. In CSS there isn't a particular advantage (other than knowing when you see the css that there is only one element with that ID). You could argue that this would prevent you or other designers from using that same id on another element, and thus screwing up the design.
The real advantage (as others have mentioned) comes when you use Javascript, as you can easily identify the element in question by using its id.

[sho88]

Sirkent, on Jan 5 2007, 10:56 AM, said:

An id should be given to only one element in your HTML. That id can then be used to identify that element and only that element.

A class on the other hand, can apply to as many elements as you wish.

As far as I know that's the only difference, but if not then I'm sure someone will correct me!

thankyou!

[James Mitchell]

Sirkent is right and that is a pretty plain answer too, well done.

[Catalyst]

The ID can also be used to identify an element for scripting purposes.

[TJSingleton]

it has replaced the name attribute in many cases.

[marcamos]

TJSingleton, on Jan 5 2007, 03:01 PM, said:

it has replaced the name attribute in many cases.

I sometimes use the id value of my wrapper div as the target of an anchor at the bottom of a page, linking to "Top of page".

[sypher]

Yep sirknet is right.

You can use the id class for say your header, footer etc (as they only appear once in your page)

But use a class for a h3 element as that may appear more than once on a single page.

[moojoo]

sypher, on Jan 5 2007, 09:56 PM, said:

Yep sirknet is right.

You can use the id class for say your header, footer etc (as they only appear once in your page)

But use a class for h3 any element as that may appear more than once on a single page.

This post has been edited by moojoo: 05 January 2007 - 05:04 PM

[sypher]

Ah sorry i was just using an example but ye any element which appears more than once, alot easier to understand

[BigMike Sidelka]

Other than the ability to link to the identified elemenet on the page what other purpose is there to identify an element by its style properties?

[marcamos]

NewAge.Mike, on Jan 6 2007, 03:15 PM, said:

Other than the ability to link to the identified elemenet on the page what other purpose is there to identify an element by its style properties?

You should never identify an element by its style, instead try to identify an element by it's content. We've spoken a bit about this already towards the last half of this thread: CSS Selectors.

Here is a quick example of our discussion:

<div id="blueBoldText">Hello and welcome to my site...</div> is bad.

<div id="introParagraph">Hello and welcome to my site...</div> is good.

[BigMike Sidelka]

herkalees, on Jan 7 2007, 02:16 AM, said:

You should never identify an element by its style, instead try to identify an element by it's content. We've spoken a bit about this already towards the last half of this thread: CSS Selectors.

Here is a quick example of our discussion:

<div id="blueBoldText">Hello and welcome to my site...</div> is bad.

<div id="introParagraph">Hello and welcome to my site...</div> is good.

but still, why identify by a css class introParagraph? why use id instead of class? like
<div class="introParagraph" name="Intro" title="Intro">Hello and welcome to my site...</div>

[marcamos]

Oh, I see what you're asking. When there is only one instance of any given thing, it, semantically, requires an ID. When there is more than one instance of any given thing, it needs a class.

When you get your driver's license, you get an ID (there is only one you). When you go to school, you're in a class called "student" (there is many of you, students).

Back in the world of code, this is a per document rule, not per site.

[BigMike Sidelka]

herkalees, on Jan 7 2007, 02:43 AM, said:

Oh, I see what you're asking. When there is only one instance of any given thing, it, semantically, requires an ID. When there is more than one instance of any given thing, it needs a class.

When you get your driver's license, you get an ID (there is only one you). When you go to school, you're in a class called "student" (there is many of you, students).

Back in the world of code, this is a per document rule, not per site.

what im asking is, what is the advantage of identifying something through a css property?

[Karl Buckland]

In CSS there isn't a particular advantage (other than knowing when you see the css that there is only one element with that ID). You could argue that this would prevent you or other designers from using that same id on another element, and thus screwing up the design.

The real advantage (as others have mentioned) comes when you use Javascript, as you can easily identify the element in question by using its id.

[BigMike Sidelka]

Sirkent, on Jan 7 2007, 05:27 AM, said:

In CSS there isn't a particular advantage (other than knowing when you see the css that there is only one element with that ID). You could argue that this would prevent you or other designers from using that same id on another element, and thus screwing up the design.

The real advantage (as others have mentioned) comes when you use Javascript, as you can easily identify the element in question by using its id.

ok lol thanks. not sure if i worded my question wierd or somin.

[Ryan Fait]

I wrote an article on this a while back. I think the only thing you guys left out is the ability to use more than one class at a time.

<style type="text/css">
	.left {
		float: left;
	}
	.bold p {
		font-weight: bold;
	}
	.half {
		width: 50%;
	}
</style>
<div class="left bold half">
	...
</div>

http://ryanfait.com/...versus-classes/

[marcamos]

Wonderful addition Ryan; that is another great ability of classes!

[Spode]

herkalees, on Jan 8 2007, 01:24 AM, said:

Wonderful addition Ryan; that is another great ability of classes!

Very True, and something I don't do enough of! I expect I could clean up my CSS if I did.

As far as Ids replacing Names. I'm fairly sure PHP forms still rely on names?