Cascading Style Sheets
O lo que es lo mismo: hojas de estilo en cascada.
El motivo de haber puesto en primer lugar la denominación en inglés es porque vas a encontrar en muchos momentos estas siglas para referirse al concepto que trabajaremos en este epígrafe. Poco a poco iremos descifrando el significado real de esta denominación que, por ahora, puede resultarnos un tanto críptica.
Lo primero en lo que coincidiremos es en que el lenguaje HTML es francamente antipático y poco flexible cuando se trata de incidir en la apariencia de una página. El propio origen del lenguaje HTML unido a su evolución han sido los que han provocado esta situación. Pensemos que el lenguaje HTML surgió en un entorno, el universitario, y con un propósito, la publicación de contenidos científicos estructurados, eminentemente textuales. El problema es que la masiva difusión de Internet hizo que se rompiera el marco original y se hiciera necesario, especialmente desde la irrupción de un uso comercial, presentar páginas en las que el centro de gravedad se trasladaba del contenido y su estructuraa la forma, ya que se trataba de crear "imagen de marca". Fue entonces cuando empezaron a aparecer los problemas, ya que el lenguaje HTML no está pensado para trabajar con los elementos formales sino con los de tipo estructural.
Si te paras a pensar un poco sobre lo que acabas de leer puedes darte cuenta por ejemplo de que, aunque hayamos podido utilizar las etiquetas <h1> para conseguir un texto de un determinado tamaño que nos pudiera valer de titular lo lógico habría sido emplearlas para organizar los contenidos indicando que su contenido es la cabecera de un fragmento que tiene tiene una importancia superior, que aquellos que van encabezados por un <h2>
El crecimiento exponencial de Internet hizo que la imagen que nos hemos hecho de lo que debe ser una página WEB fuera acercándose a lo que es hoy: un entorno multimedia en el que los aspectos formales han cobrado una gran importancia. Pero esta percepción sigue apoyándose en la utilización del mismo lenguaje que le había servido de base en los primeros tiempos, lo cual ha hecho que los diseñadores hayan tenido que recurrir a trucos y artimañas para paliar las deficiencias del lenguaje HTML en lo referente a la presentación visual.
Al tratarse de añadidos a la finalidad original, y en muchos casos utilizaciones francamente contradictorias con la misma, podemos encontrarnos con situaciones muy problemáticas cuando pretendemos introducir modificaciones globales en un sitio WEB. ¿Imaginas, por ejemplo, lo que sería necesario para cambiar el tipo de letra de un sitio WEB compuesto por cincuenta páginas?
La forma de solucionarlo ha sido la utilización de las hojas de estilo en cascada. Las hojas de estilo en cascada aportan, como característica esencial, la posibilidad de separar los elementos formales de los de contenido, de forma que con una pequeña modificación de la hoja de estilo se pueda cambiar el aspecto de todas las páginas en las que se aplica esa hoja. Volviendo al ejemplo anterior tal vez nos bastaría con cambiar una vez la palabra sans-serif por serif para conseguir que las cincuenta páginas de nuestra web cambiaran automáticamente de apariencia.
Una cuestión a tener en cuenta es que no todas las versiones de los navegadores las soportan y que cada uno de los navegadores ofrece un soporte más o menos ajustado a las especificaciones. Actualmente nos encontramos con la especificación CSS2 pero podríamos encontrarnos con que algunas propiedades que se muestran correctamente en un navegador no lo hacen en otro.
¿Por qué se denominan hojas de estilo?
La denominación de hojas de estilo hace referencia a que podemos, a partir de las etiquetas básicas de HTML, realizar modificaciones en las propiedades de las mismas, creando clases y seudoclases e indicándole al navegador unas instrucciones muy precisas sobre la forma en la que tiene que presentar un determinado elemento, esto es, el estilo de la presentación
Una ventaja añadida es que, al tratarse de una colección de instrucciones escrita en formato de texto y, en su uso más aconsejable, separada de la propia página web y aplicable a múltiples páginas simultáneamente conseguiremos que nuestra definición de estilos haga que la página en sí resulte mucho más reducida.
Por otra parte, al quedar un código mucho más limpio gracias a la descarga de los elementos de formato, la estructura de la información quedará mucho más clara ya que el código tenderá a ser muy simple.
¿Por qué se denominan "en cascada"?
A la hora de crear un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario y no necesitaríamos volver a indicar esta característica.
Gracias a la organización en cascada podemos crear hojas de estilo muy compactas, ya que una sola norma en el primer elemento de la cadena de herencia permite que podamos aplicarla a todos los herederos.
Además de ello se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:
Teniendo en cuenta el orden mencionado, el procedimiento más cómodo es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que, al ser más específicos, resultarán preferentes.
¿CSS1 o CSS2?
Es posible que en cuanto intentes localizar alguna información sobre hojas de estilo te aparezca la referencia a uno de los dos niveles. Obviamente son más avanzadas las especificaciones del nivel 2, pero el gran problema que tenemos es que, hoy por hoy son muy pocos los navegadores capaces de soportar todas las posibilidades establecidas en este nivel 2. De hecho, las que se utilicen en las explicaciones de este apartado serán aquellas que estén soportadas por Mozilla 1.7 y por Internet Explorer en su versión 6, aunque en la mayoría de los casos también serán soportadas por una gran cantidad de navegadores.