On Tuesday, May 02, 2006 9:49 AM [GMT+0100=CET],Mark Fellowes
<[EMAIL PROTECTED]> wrote:
> What I find confusing is the uses of classes as opposed to id's in
> the markup. For example, I have a div for a right column. Would
> creating a class for the <p> section of that div in the markup make
> sense ?
Think of an ID as equivalent to your Social Security Number (or national ID
number, if you're not in the US). It uniquely identifies an element. Use
it when you want to apply CSS to that element, and only that element.
Think of a class as equivalent to some role you play: father, brother,
developer, friend, bicyclist. It gives a name to a set of attributes. Use
it when you have a set of elements that play some role and should therefore
have similar attributes.
For example, suppose you have a site with three columns (left, center, and
right). The left and right columns hold news items, and the center has some
content.. You might mark it up this way:
<div id="left" class="newsItemHolder">
<div class="newsItem">Item 1</div>
<div class="newsItem">Item 2</div>
<div class="newsItem">Item 3</div>
</div>
<div id="center">
Some content here
</div>
<div id="right" class="newsItemHolder">
<div class="newsItem">Item 1</div>
<div class="newsItem">Item 2</div>
<div class="newsItem">Item 3</div>
</div>
You'd style it this way:
#left { stuff to put the element on the left side of the page }
#right {stuff to put the element on the right side of the page }
#center {stuff to put the elemnt in the center of the page }
.newsItemHolder { stuff that all holders of news items should have in
common }
.newsItem { stuff that all news items should have in common }
The DIV whose id is "left" will get attributes from #left and
.newsItemHolder.
The DIV whose id is "right" will get attributes from #right and
.newsItemHolder.
The DIV whose id is "center" will get attributes from #center.
All others will get attributes from .newsItem
Hope this helps!
Rob Freundlich
"Males are biologically driven to go out and hunt giraffes." - Newt Gingrich
"Some folks you don't have to satirize, you just quote 'em." - Tom Paxton
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
