MANUALES

TUTORIAL CSS:

Agrupación de elementos (span y div)

Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.

Agrupación con <span>

El elemento <span>:  Elemento neutro que no añade nada al documento en sí. 

Pero con CSS <span> : Se usa para añadir características visuales distintivas a partes específicas de texto en los documentos.

Ej: podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja de estilo:

 
 <p>El que pronto se acuesta y pronto se levanta,
es hombre <span class="ventaja">saludable</span>,
<span class="ventaja">rico</span>
y <span class="ventaja">sabio</span>.</p> 

El código CSS necesario para producir este efecto es el siguiente:

 
 span.benefit {
  color:red;
 }  

Agrupación con el elemento <div>

<div>:  se usa para agrupar uno o más elementos a nivel de bloque.

Veamos un ejemplo:

 
 <div id="democrats">
 <ul>
 <li>Franklin D. Roosevelt</li>
 <li>Harry S. Truman</li>
 <li>John F. Kennedy</li>
 <li>Lyndon B. Johnson</li>
 <li>Jimmy Carter</li>
 <li>Bill Clinton</li>
 </ul>
 </div>

 <div id="republicans">
 <ul>
 <li>Dwight D. Eisenhower</li>
 <li>Richard Nixon</li>
 <li>Gerald Ford</li>
 <li>Ronald Reagan</li>
 <li>George Bush</li>
 <li>George W. Bush</li>
 </ul>
 </div>

En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes:

 
 #democrats {
  background:blue;
 }

 #republicans {
  background:red;
 }

Tomado de: http://es.html.net/tutorials/css/lesson8.php#s1