A <div> is just a division- thats it.
Take this mark-up for example:
<body>
<div>
<p>this is a sentence</p>
</div>
</body>
In a browser that would render no differently then if I were to use this mark-up instead:
<body>
<p>this is a sentence</p>
</body>
The only difference is that the first example contains a division which I can add universal styles to.
What I mean by that is lets go back to your example and say I had a bunch of different elements within my div. If that was the case then I could target my div and apply a universal style change to every element within the div. Where as, if they weren't in a division I would need to target every element individually.
That is really all a div is. Abstratctly, a div is just a division or "container" that groups elements together giving them the same parent- the div. Which you can refer back to in order to make style changes throughout every child- element within the div.
Non abstratctly, a div is a box- a block level element so to speak.
In CSS there are only two general types of elements
- block
-inline
A block element is any element that can contain other elements(block or inline).
Here is a list of block level elements:
- h1,h2,h3,h4,h5,h6
-p
-div
-blockquote
-ul and ol
Now a inline element is one which is contained within a block element but, can not contain a block itself only more inline elements
Here is an example of inline elements
em
strong
cite
a
For your *first* question I would have to say you restructure the mark-up so it is semantic then use descendent selectors to apply styles.
For instance, I know when I first got into this whole CSS thing I loved my divisions and ids. However, you should allways use them sparingly and instead use descendent selectors to target items. This will both decrease the size of your files and amount to less promblems with the cascade latter on.
Descendent selection are all based on the document object model- or the hierachy of a document.
For instance take this bit of mark-up:
<body>
<div id= "navigation">
<ul>
<li><a href="">linkone</a></li>
<li><a href="">linktwo</a></li>
<li><a href="">linktwo</a></li>
</ul>
</div> <!-- navigation -->
</body>
That is just a list with links.
So if I wanted to have links appear in red I could just do this:
a {
color: red;
}
However, now if I have any other links in the entire design they will also appear in red. The way I fix this is to use descendent selectors and get as specific as possible like so:
#navigation ul li a {
color: red
}
Now my links will only be styled if they have a list item parent whose parent is a unordred list whose parent is the div navigation.
For the second question I would recommend naming your folders and sire components to well describe what they actually are. Textwrangler is a good texteditor to download with the view like dreamweaver.