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 los vídeos anteriores vimos los conceptos de “en cascada”, y un ejemplo de aplicación del concepto “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.

Además del proceso “en cascada”, en CSS existe otro mecanismo que debes conocer, la herencia. Este mecanismo influye en el valor que se asigna a una propiedad. No todas las propiedades se heredan, así que este mecanismo puede causar cierta confusión. Si tienes alguna duda, lo mejor es que consultes alguna referencia de las propiedades de CSS, como esta que se incluye en la recomendación oficial de CSS 2.1.

Podemos ver que las propiedades que definen el color, el estilo o el tamaño del borde no se heredan. Sin embargo, el color del texto sí que se hereda. La herencia de una propiedad la podemos consultar en otras referencias. Por ejemplo, en W3Schools tenemos la misma información.

¿Por qué algunas propiedades se heredan y otras no? En algunos casos puede parecer arbitraria la decisión, pero en general, si lo piensas bien, verás que guarda cierta lógica. Para entender la herencia de una propiedad tenemos que tener en cuenta el DOM de la página web. Cuando una propiedad que es heredada, por ejemplo el color, no tiene asignado un valor, la propiedad toma el valor calculado de esa misma propiedad en el padre. Si el padre no la tiene definida, se tomará el valor de su padre y así sucesivamente hasta llegar a la raíz del documento.

Vamos a verlo con un ejemplo. Este es el código HTML de la página de ejemplo que voy a utilizar. Es una página muy sencilla. La página posee un encabezado y un párrafo. Además, en el párrafo hay un enlace y un fragmento marcado en negrita.

Ahora a la página le añadimos un CSS. Al body le definimos un color verde para el texto y un estilo negrita. Al contenedor principal main le definimos un borde sólido y de color negro de 2px de ancho. Y este es el resultado de visualizar esta página en Google Chrome.

El color verde se ha asignado al elemento body de la página, pero ha sido heredado por el resto de elementos que descienden de él. El borde se ha aplicado al elemento main y sólo se ha aplicado a él. Al ver esto nos pueden surgir dos preguntas: ¿Por qué el enlace no aparece de color verde? ¿Por qué el encabezado y el párrafo no tienen un borde?

El color es una propiedad que se hereda. Por tanto, el enlace debería aparecer de color verde. Sin embargo, los enlaces son especiales porque tienen definido un color propio en la hoja de estilo del agente de usuario. ¿Cómo se puede hacer que el enlace también tenga color verde?

Claro, la solución obvia que se le ocurre a mucha gente es asignar el color verde al enlace. Pero no es la mejor solución, porque si ahora queremos cambiar el color del texto, nos tenemos que acordar de cambiarlo aquí y aquí. ¿No se puede hacer que el enlace herede el color del elemento padre?

Así sólo tendríamos que cambiar el color en un único punto. Sí, eso es posible con la palabra reservada inherit de CSS. Al asignarle ese valor al color del enlace, el color del enlace es heredado del padre. Y por tanto ya aparece de color verde.

Esto mismo se puede hacer con cualquier propiedad de CSS, incluso con aquellas que no son heredadas. Si se asigna este valor al borde del párrafo, el párrafo se muestra con el mismo borde que su padre.

Y ahora lo último, ¿cómo podemos hacer que el valor de una propiedad no sea heredado? Por ejemplo, supongamos que el texto que está marcado en negrita no queremos que tenga el color verde, sino el color por defecto. Esto es posible con la palabra reservada initial de CSS. Cada propiedad tiene un valor defecto, un valor inicial. En el caso del color depende del agente de usuario. Normalmente es el color negro.

Si al elemento strong le asignamos un color con el valor initial, el texto marcado en negrita ya no aparece con el color verde, sino con el color negro.

Ahora te invito a que veas el vídeo “CSS: especificidad de las reglas”, en el que te explico cómo se calcula la regla de CSS que se aplica cuando existen varias reglas que se pueden aplicar a un mismo elemento.

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.