#container/.container: the difference between div id and div class?


#container
<div id="container">


.container
<div class="container">

what’s the exact difference?

cheers

IDs are used by one element only. Thus, you cannot use ID’s for things like a bunch of links. Assuming that there would only be one container on your page, using an ID is correct. Think about the ID that you would normally find in your wallet, it’s your unique identifier, thus, nobody can have the same ID as you.

Classes are used for elements which have the same style applied to them. For example, if you have multiple lists, you can assign the same class to each list and they will all inherit the CSS applied to them. You can think of this like you would school, all 7th-graders go to a certain class, all 8th-graders go to a different class, etc.

great answer

thanks

so what’s the use of the using IDs? I could just use class and use it once and, later if needed, twice…

so when defining an id you use the hasch sign right?

ID’s are pretty useful in CSS when used correctly. In short term: The ID will cascade over the class. For example, a set of links is on a page and each link has the class “normal_link” applied to it, so they all have the same style. You could apply the ID “currently_viewing” to one of the links and give it it’s own style which cascades over the “normal_link” class, so you could make the text bolder while still keeping the style that was applied by the “normal_link” class.

And yes, the hash (#) symbol would be the correct thing to use.

thanks a lot for your time…
I was just wondering… if you have a few extra minutes, could you show some code of the example you just wrote? That would be great

cheers

http://capcom.shadowdeviants.com/css_experiments/css_cascading_with_id.html

As you can see, each link is given the class “hyperlink”. The link in the middle is also given the ID “current”. The “current” ID has a smaller width (and is positioned a little bit to fix browser quirks) than the rest of the links, so you can see how the ID cascaded over the class of the link.

Hope this helps :slight_smile:

It will probably take a few days before I fully get the concept but that helps for sure…

thanks alot

:slight_smile:

No problem :slight_smile:

Just play around with it. Take this CSS as a small example, both “things” (for lack of a better word) apply to the same element…

.class_name {width: 300px}
.id_name {width: 200px}

The ID will cascade over the class properties. Thus, the CSS applied to one element would set the width of the element to 200px, not 300px. It’s one of the great things about “cascading” style sheets :wink:

thumbs up!

IDs are also used for other things. For instance, Javascript can us an ID to grab a particular element on a page via the getElementById method.

Another difference is that elements can have more than one class, but only one ID.

<div id="content">...</div>
 <div class="content left">...</div>

For example, this could be used to assign layout using one class, and colours with others - three divs, with identical layout properties, but different colour schemes, without repeating all the styles.