PDA

View Full Version : Need CSS help

shashgo
11-11-2002, 09:48 AM
Hi all,

What is the difference between
<p id=#347>Text</p>
and
<p class=347>Text</p>
DCElliott
11-11-2002, 10:49 AM
An id is a unique identifier. If you use:
<p id="347">Text</p> (note use of quotes and no #) you get the style that you had defined in the <style> section of your <head> or in your <link>ed stylesheet. You can use id only once. In the example above, this would be paragraph 347 or something like that. IDs are commonly applied to <div>s to give them special layout positioning or formatting.

A class can apply to anything. Imagine we had a class defined like this:
.red {color:red;}
you could use this class with any element with text:
<p class="red">red text</p> (again note the quotes) and the text would render as

red text

You could just as easily use it for <h1 class="red">Red Title</h1> to make a red title.

Red Title

There are some really good CSS resources out there - here is a site with an extensive list (http://www.web-building.com/css.php3#style)
shashgo
11-11-2002, 12:05 PM
Thanks, Ill take a look at it.
Tell me this, if id is a unique identifier and can be used only once and class can be used more than once, then isnt class more useful than id. In other words, what is he usefulness of using id?
DCElliott
11-11-2002, 12:58 PM
As I pointed out ids can be very useful for <div>s where you may be doing positioning. You can't have two things positioned in the same place (well, not usually) Consider the folowing code from a stylesheet:BODY { position: relative; min-width: 580px; width: 100%; margin: 0; padding: 0; }
#top { position: absolute; top: 0; left: 0; min-width: 580px; width: 100%; height: 120px; }
#left { position: absolute; top:130px; left: 0px; width: 19%; margin: 1% 1% 2% 0; }
#right { position: absolute; top:130px; left: 80%; width: 19%; margin: 1% 0 2% 1%; }
#middle { position: absolute; top:130px; left:20%; min-width: 320px; width: 58%; margin: 1% 1% 2%;}top, left right and middle all define structural parts of a page and are, therefore, necessarily unique.

When considering precedence in the style cascade, ids are given more weight than classes which can be useful as well. Id are useful in contextual selectors as well. If I want paragraphs in the #left div to be bordered, I create a style#left p {border: 1px solid black} and the border will only apply to <p> tags within the #left div.