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.

En el vídeo anterior vimos el concepto de “en cascada”. Recuerda que el proceso “en cascada” define un orden de aplicación de los estilos del agente de usuario, del usuario y del autor de la página web.

En este vídeo vamos a ver un ejemplo de análisis de aplicación de los estilos en cascada. Este es el código HTML de la página de ejemplo que voy a utilizar. La página tiene un encabezado y un párrafo.

En la hoja de estilo del agente de usuario, la hoja de estilo que incorpora cada navegador web, el encabezado h1 tiene definido un estilo por defecto. Ahora a la página le añado un CSS. El CSS es muy sencillo, sólo modifica el peso del encabezado para desactivar la negrita. La hoja de estilo del autor tiene prioridad sobre la hoja de estilo del agente de usuario, así que el encabezado se muestra sin la negrita.

Ahora defino una hoja de estilo del usuario. En esta hoja, el encabezado h1 vuelve a tener el estilo negrita. Y además le añado el estilo cursiva.

En el vídeo anterior te expliqué cómo se puede establecer la hoja de estilo del usuario en Internet Explorer. En otros navegadores, como Google Chrome y Mozilla Firefox, no existe esta opción en el propio navegador, pero recuerda que hay complementos que añaden esta opción.

La hoja de estilo del autor también tiene prioridad sobre la hoja de estilo del usuario. Por tanto, el encabezado se muestra en cursiva, pero no se muestra en negrita, porque en la hoja de estilo del autor de la página web se modifica el peso del encabezado para desactivar la negrita. Y esa regla tiene prioridad sobre la misma regla definida en la hoja de estilo del usuario.

El texto del párrafo sí se muestra en azul porque en la hoja de estilo del autor no hay ninguna regla que lo impida.

Ahora modifico la hoja de estilo del usuario y le añado el modificador important a la regla que define que un encabezado se debe mostrar en negrita. La hoja de estilo del usuario, cuando tiene el modificador important, tiene prioridad sobre la hoja de estilo del autor. Por tanto, el encabezado se muestra en negrita, aunque vaya en contra de lo que está definido en la hoja de estilo del autor de la página web.

Ahora te invito a que veas la tercera parte de este vídeo, en el que te explico el concepto de la herencia en CSS.

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.