Estiliza tus listas con CSS

Las listas en CSS constituyen un elemento muy importante dentro de una página web que pretenda respetar los estándares.

Los navegadores muestran, por defecto, las listas el mismo color y fuente que el body. A continuación os enseño la forma de hacer vuestras listas más atractivas, de forma rápida y sencilla, utilizando solamente listas (ol) y parrafos (p) para diseñarlas.

DemostraciónEjemplos en HTML

DescargaArchivo ZIP

1. Introducción

La manera correcta de presentar una lista es utilizando las etiquetas ul, ol y el elemento de párrafo p. Como explica el siguiente ejemplo:

2. Cambiando el estílo

Gracias a CSS podemos dar formato a nuestras listas sin tocar el código HTML.

Código CSS

#lista1 {
	font: italic 1em Georgia, "Times New Roman", Times, serif;
	color: #999;
}
#lista1 p {
	font: normal 0.8em Arial, "Helvetica", sans-serif;
	color: #000;
}

Código HTML

<ol id="lista1">
	<li>
		<p>Primera  línea de la lista.</p>
	</li>
	<li>
		<p>Segunda  línea de la lista.</p>
	</li>
	<li>
		<p>Tercera línea de la lista.</p>
	</li>
</ol>

3. Utilizando imágenes

Además de poder variar el estilo de nuestras listas con los valores que proporciona CSS, también podemos utilizar imágenes en su lugar. Es muy sencillo, tan solo tenemos que cambiar el valor de list-style, en este caso por la url del archivo que queremos mostrar, como se muestra a continuación:

Código CSS

list-style: url('img/bullet.gif') outside;

Este tutorial está inspirado en Style Your Ordered List, publicado por WebDesignerWall.