CSS - DIV or SPAN, ID or CLASS?

When you use CSS to control several documents from one css file it's good to know the difference between DIV, SPAN, ID and CLASS.

1. Every "div id" can only be used once in every document. Let's say you have a webpage with two div:s. One is a menu and one the main box with the text.

<div id="menu">This is a menu. I use a "div id" to position it.</div>
<div id="main">This is my main window. I use a "div id" to position it</div>


2. You want a couple of small identical boxes in the main window. For that you use the "div class" since "div class" is able to control several objects in the same document.

<div class="box">This is my first box.</div>
<div class="box">My second.</div>
<div class="box">And my third.</div>


3. You want parts of the text to be red. For that you use a "span class". Span class can only control small parts of the page and never more than one row of text.

I want parts of my text to be <span class="red">red</span>.