Class vs. ID

I just don' t seem to get it....

[modo]

I am really, really trying to understand the difference between the two. I can't seem to find a SIMPLE explanatio anywhere....

Could someone explain it in idiot-proof language?

[benihana]

class > can be a pplied to multiple items on one page
id > can only be applied to one item on any one page

[grahamstewart]

id

uniquely identifies an element. You should use this to identify parts of your page that you want to apply styling to.

class

does not have to be unique. You use this to identify a type of element.

This has been discussed a few times so maybe an example will help.

we are running a newspaper: our page will contain a navbar and a content pane. So we would give them

id

s to identify them.

The content pane might contain several articles.
So we use a class to identify them.

We end up with something like this..

<div id="content"> 
  
    <div class="new article"> 
        <h2>Bus found on moon</h2> 
        <p> 
          blah blah blah 
        </p> 
        <span class="byline">by Graham Stewart</span> 
    </div> 
  
    <div class="article"> 
        <h2>Man bites dog</h2> 
        <p> 
          blah blah blah 
        </p> 
        <span class="byline">by Graham Stewart</span> 
    </div> 
  
    <div class="article"> 
        <h2>Rockstar ate my hamster</h2> 
        <p> 
        blah blah blah 
        </p> 
        <span class="byline">by Freddie Star</span> 
    </div> 
</div> 
   
<ul id="navbar"> 
    <li><a href="page3.html">Page 3</a></li> 
    <li><a href="cross.html">Crossword</a></li> 
    <li><a href="sport.html">Sports</a></li> 
</ul> 

See?

#content and #navbar are unique named elements that appear once only on the page.

Where as .article and .byline are a general type of element which appears one or more times on the page.

Also note that an element can have more than one class. Here the first article also has the class .new which we might use to highlight breaking news stories.

[modo]

i think i get it now...hm....ok....i think the only way to really understand it, is to do....

thanks for the nice explanations!

;)
modo