Css Coding

[wampthing]

First Question

 

I was reading a tutorial about doing nav menus in css

The tutorial said to do "ul#navlist" and I would have always thougt to do "#navlist ul". Is there a difference? If so, what?

 

Second Question;

 

I always get confused about doing .navlist vs #navlist. Anyone have any insight as to which to use when?

[TCH-Bruce]

Don't know the first part but for the second question.

 

If you use

 

If you use

[wampthing]

OK, so I do understand that much. I guess my question would be "why do I use one or the other?"

[Redeagle]

id should only be used once on a page, where class can be used as many times as you need to

 

also, on your first example, that would be applied only within a ul tag, the second one would be anytime the div navlist was used.

[surefire]

I would translate the first to mean "apply this to unordered list with an id of navlist"

 

The second would read "apply this to an unordered list that is within any other element with an id of navlist"

 

Sound the same...? It's not.

 

First example is more specific... much more

 

><ul id="navlist">

 

Whereas in the second example, you could have several ul's within a containing div or other element that has the id of navlist.

 

><div id="navlist">

<ul id="whatever">
...
</ul>



</div>

 

So, css gives you the ability to specify blocks of html depending on their order within the document, but these instructions also determine which instructions take precendence when there is a conflict... which is often done intentionally by advanced designers.

[surefire]

As to your other question... why and when id versus class...

 

Somewhat up to you, but you're only supposed to use id once. There are some other things to consider. I believe that id's take precedence over class... but you don't often see name conflicts (on purpose) between class and id. In other words, you rarely see id="tall" and class="tall" in the same document.

 

 

Typically, you'll see id tags used for bigger layout instructions. The big blocks of code that determine the main structure of the document:

 

>#header
#footer
#main
#sidebar
#navbar

 

that kind of stuff

 

Classes are generally used for fine tuning the site and applying styles to several elements across the page.

 

Don't forget that you can also declare styles for the element tags themselves.

 

>img {
padding: 1em;
}

 

There are lots of great sites as examples that I could point you to, but a good starting point would be anything created by Jeffrey Zeldman. Google his name and you'll get quite a bit to look at.

[wampthing]

Makes sense.

Thanks all