Help understanding DIV

[motormaniac]

i have a question. I need help understanding DIVs better. I thought i knew about them but now i know i dont. So i eget the div but what is the diffrence between these to code lines. <div id="footer"> or <div class="footer"> and how would each one be used and what would it look like in the style sheet

[Marc]

Well in the stylesheet an id would be referanced with a '#' so for example:

Code: Select all

#footer {..}

and a class would be referanced the same although replacing the # with a '.' e.g.:

Code: Select all

.footer {..}

Hope that helps!

[VanessaJW]

An ID is a unique identifier, so can only be used once on a page whereas a class can be used for different elements to which you want to apply the same styles.

Not sure if I've explained that well

[motormaniac]

so what would you use each one for?

[Marc]

You can use an ID for whatever you want BUT you must only use it ONCE. You can use a class as much as you wish.

Please note you can use an ID as many times as you want as long as it isnt the same one e.g. id="footer" and id="footer".

Normally i use an ID for like a containing div, a header div and a navigation div (things that are only going to be used once on a page!).

Hopefully that clarifys this for you

[motormaniac]

i think so thanks

[karinne]

Usually ID are used for your main sections (for a lack of a better word right now) like: branding (header), navigation, content, site info (footer)

Other stuff like: thumbnails or advertising, etc.... I would use classes.

hth

[alexgeek]

IDs are also used in JavaScript to select an element with a particular ID. This is very useful!

[pas2gether]

Generally I use id's for structural areas that you know will not be replicated on the page.

[welshstew]

The below is from smashing magazine

2.1. Technical Tips: IDs, Classes

• 1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]
• Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]
• CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]
• You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson]

Hope it helps

[moojoo]

To keep it simple:

use ID's for layout and Classes for elements that may need more than a single instance on any page.

[alexgeek]

I didn't know you could use more than one class on an element, thanks Welshstew

[smdesignworks]

Something you may also find handy is you can add multiple classes to tags, so lets say you want a highlight (a different color) and want to increase the font size on the first sentence of a paragraph.

This can be done by having a separate class for the font size up, and the highlight in case you want to reuse the elements for other things also, but don't want them combined together, if that makes sense, hope this helps some people realise you can add as many classes as you like to a tag.

Example:

Code: Select all

.supersize {font-size:120%;}
.underline {text-decoration: underline;}
.highlight {color:#7FC240;}

<p class="supersize underline highlight">Now this sentence would be increased in font size, have a underline and be highlighted a green color.</p>

I just kind of wanted to let you know this method because it will save you time and come in handy, especially for images, you can make a "photo" class which pads your images and throw another class in there to either align it left or right, but you can make them all at once and always have them in your css, then you just have in the class="photo left" for example.

So in short, multiple classes will come in handy sooner or later.