Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar qué es la cascada y la herencia, dos conceptos muy importantes que hay que conocer cuando se escribe un CSS. CSS es el acrónimo de Cascading Style Sheet.

Si en el nombre de esta tecnología aparece el término “cascading”, en cascada, es porque se trata de una característica muy importante. La recomendación oficial de CSS tiene una sección dedicada a la forma de asignar un valor a una propiedad. El valor se asigna teniendo en cuenta diferentes reglas.

Para calcular el valor de la propiedad CSS de un elemento concreto en una página web se tiene que tener en cuenta el valor especificado, el valor calculado, el valor usado y finalmente el valor real. El estilo final de un elemento se puede especificar en diferentes sitios y de diferentes maneras que pueden interactuar de una forma compleja. Por ejemplo, el color final de este elemento depende de diferentes reglas que existen en el CSS que se aplica. Como vemos, existen diferentes reglas que definen el color, pero una de ellas “ganará” y será el color que finalmente mostrará el elemento.

Este mecanismo proporciona una gran potencia a CSS, pero también hace que sea confuso y difícil de utilizar si no se conoce cómo funciona. Para el cálculo del valor de una propiedad en cascada se aplican tres fuentes de información: en primer lugar, los estilos por defecto que tiene definido el agente de usuario, es decir, el navegador web del usuario. A continuación, los estilos especificados por el usuario que está leyendo el documento. Y por último, los estilos definidos por el autor de la página web.

Este es el orden de aplicación de los estilos, de menor prioridad a mayor prioridad. Todos estos estilos definen el estilo final que tiene un elemento en una página web. Los estilos del agente de usuario son los estilos que incorpora cada navegador de fábrica.

Lo lógico es esperar que todos los navegadores utilicen el mismo estilo por defecto, pero desgraciadamente no es así y existen algunas diferencias sutiles que pueden ocasionar grandes diferencias cuando una página web se visualiza en diferentes navegadores. CSS 2.1 define una hoja de estilo por defecto para HTML4. Si revisamos esta hoja de estilo por defecto podemos encontrar cosas interesantes. Por ejemplo, el cuerpo de la página tiene definido un margen de 8px, o estos son los tamaños que tienen definidos los encabezados, desde h1 hasta h6. Como podemos ver, de h1 a h3 el tamaño es mayor que el texto normal, h4 tiene definido el mismo tamaño que el texto normal y h5 y h6 tienen definido un tamaño menor. Esta es la hoja de estilo por defecto que define el W3C, pero cada navegador tiene definida la suya propia.

En estas direcciones podemos encontrar las hojas de estilo por defecto de Mozilla Firefox, de varias de las versiones de Internet Explorer, y de Safari. Para evitar este problema, existen hojas de estilo que inicializan o resetean los estilos para que una página web se visualice de la misma forma en casi todos los navegadores.

La segunda fuente de información son los estilos del usuario, que son estilos que define cada usuario y que se pueden emplear para sustituir los estilos que tiene definidos una página web. Esta característica se puede utilizar para mejorar la accesibilidad de una página web.

En Internet Explorer se establece la hoja de estilo del usuario a través de Herramientas, Opciones de Internet y Accesibilidad. En otros navegadores, como Google Chrome y Mozilla Firefox no existe esta opción, pero existen alternativas, como la extensión Stylish, que está disponible tanto para Google Chrome como para Mozilla Firefox. Con esta extensión el usuario puede aplicar su propia hoja de estilo a un sitio web.

Por último, los estilos del autor son los estilos que define el creador de una página web. Estos estilos se pueden definir en tres puntos: en un fichero externo enlazado con la etiqueta link, al principio de la propia página con la etiqueta style, y en un elemento concreto con el atributo style.

El orden de aplicación de los estilos se puede modificar con !important, que aumenta la importancia de una regla. Esta tabla resume el orden de aplicación de los estilos. Como se ve, si en los estilos del usuario se aplica el modificador important, estos estilos tienen prioridad sobre todo el resto de estilos.

Ahora te invito a que veas la segunda parte de este vídeo, en el que te muestro un ejemplo de análisis de aplicación de los estilos en cascada. Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.