Indice | Siguiente

Voy a contar una historia. Si te sientes identificado con ella, éste es tu tutorial.

Erase una vez un diseñador de sitios web al que le encargaron un proyecto. Tras dias y dias de trabajar sin descanso, presentó un precioso diseño: Unas columnas azul oscuro, sobre un fondo rojo, que combinaban con unos textos de enlace en Verdana y color amarillos, para distinguirlos del texto normal (Arial en verde). Así más de 150 páginas.
Se presentó alegremente donde el cliente y éste le dijo "Mmmm... Me gustaría más el fondo blanco y las letras normales en morado. Y si pudiera ser cambiar también el color de las columnas..."
Y te pusiste a pensar "yo lo mato; a reformar 150 páginas... AAAAGH!!!"

¿te ha pasado esto?. ¿Y si te dijera que existe la posibilidad de cambiar todo esto con modificar un par de líneas?

Las maravillas de CSS

Construir páginas con HTML es como intentar pintar un retrato con un rodillo de pintura. Sólo aquellos con grandes dosis de tenacidad y determinación llegan a conseguir los resultados que querían exactamente. Hay que reconocer que no es una herramienta muy adecuada para obtener precisión y flexibilidad.

Cualquiera que haya estado construyendo páginas algo más a menudo que los fines de semana se habrá dado cuenta de ello. Es por ello que muchas veces nos tenemos que arreglar haciendo GIFs cuando lo único que queremos es poder usar otra fuente, o colocando docenas de celdas en una tabla con sus GIFs transparentes para conseguir colocar lo que queremos en el sitio que queremos.

Resultado de esto: Nuestro código se hace indescifrable, nuestros GIFs son demasiados y nuestras páginas se hacen enormes de tamaño (en kb's, no en píxeles). No llamaría yo a esto un modelo óptimo de construcción.

Las hojas de Estilo en Cascada (Cascading Style Sheets, o CSS), no son nuevas, pero es recientemente cuando han llegado a la comunicdad de desarrolladores. Las CSS son un medio para separar el diseño del contenido.

Esto permite cambiar la apariencia de todo un sitio cambiando simplemente un archivo.

En este tutorial (por ser el primero), vamos a echar un vistazo rápido a la historias de las CSS, algo de información sobre al soporte (o falta de él) por parte de los navegadores y, para terminar, nos pondremos manos a la obra.

Las CSS son actualmente una recomendación por parte del W3C (World Wide Web Consortium), organización encargada de la estandarización en la web. la especificación CSS1 se convirtió en una recomendación en Diciembre de 1996 (casi nada). La especificación CSS2 fue recomendada en Mayo de 1998. Se construyó sobre CSS! y añadió soporte para hojas de estilo referidas a aspectos multimedia (desde impresoras hasta dispositivos de sonido aural), para fuentes descargables, posicionamiento de elementos y tablas.

Actualmente, el W3C está trabajando en las especificaciones para CSS3. Pero lo mejor de todo es que, aunque CSS1 lleva más de 4 años existiendo, todavía no es soportada completamente por todos los navegadores.

Bueno, y tras esta breve introducción, vamos al tutorial:
Empezaremos viendo cómo se añaden hojas de estilos a tu página, y posterior mente veremos cómo definir tus propias clases.

Colocando una hoja de estilo en tu página

Una hoja de estilo se puede escribir directamente en tu código HTML, o puede ser enlazada desde un archivo aparte. Como recomendación personal aconsejo que utilicéis siempre un archivo aparte, puesto que permite aprovecharlo para múltiples documentos.(aunque tengo que confesar que yo no lo utilizo en este sitio por absoluta vagancia: empezó siendo algo para pasar el rato y ahora ya es demasiado grande para modificarlo todo. Lo podría hacer, pero el que es vago lo es para todo)

Para insertar una hoja de estilo en tu documento, Inserta una etiqueta <STYLE>...</STYLE>. Por ejemplo:

<style>
Aquí van las definciones de los estilos.
</style>

Si lo que quisieras es enlazarlo a un archivo externo, lo que debes hacer es copiar todo lo que hay entre las etiquetas <STYLE>...</STYLE> a un archivo de texto, y guardarlo con la extensión .css. Luego harías el enlace desde dentro del documento:

<LINK REL="stylesheet" TYPE="text/css" HREF="nombre_archivo.css">

Esto hace que al cargar la página también se cargue el archivo con los estilos. De esta manera, si tuvieras las 150 páginas del ejemplo enlazando a una hoja de estilo, podrías cambiar todos los colores modificando sólamente un archivo.

Y ahora es cuando dices: "vale,vale, pero ¿cómo cambio los colores de mis enlaces y quito la raya?"

En las páginas siguientes lo descubrirás...

Indice | Siguiente