Estilos>>Introducción
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 problema real está en que la concepción original del mismo no pretendía orientarlo hacia el aspecto gráfico: la misión principal de las etiquetas HTML es proporcionar estructura lógica y semántica al contenido. 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 estructura a 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 el título 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, el trabajo 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.
Antes de empezar es conveniente considerar una cuestión: el W3C, como organismo encargado de la estandarización, elabora un conjunto de especificaciones normativas, pero... cada navegador ofrece un soporte más o menos ajustado a las especificaciones. De hecho nos encontramos en un momento en el que la especificación CSS3, que incluye una gran cantidad de posibilidades no contempladas en las versiones previas, no es soportada por ningún navegador. Incluso, la implementación de las especificaciones CSS2 presenta importantes deficiencias en Explorer 6 y anteriores, lo cual nos obligará a buscar algunos trucos para lograr efectos similares en todos los navegadores. Es muy probable que las nuevas versiones de los navegadores que tal vez hayan aparecido cuando leas esta documentación superen estos problemas y se ajusten a la normativa común.
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, 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. Si recurrimos a su uso más aconsejable, dichas instrucciones estarán separadas de la propia página web y serán aplicables a múltiples páginas simultáneamente, por lo que conseguiremos que el código de nuestra página en sí resulte mucho más ligero.
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.
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.
Es posible que en cuanto intentes localizar alguna información sobre hojas de estilo te aparezca la referencia a uno de los tres niveles. Obviamente son más avanzadas las especificaciones del nivel 3, pero ya hemos comentado que en el momento actual no están soportadas por la mayoría de los navegadores, por lo que haremos referencia a las de nivel 2.