Introducción a CSS (IV): Herencia, cascada y estilos inline

Valencia, 24/03/2022 (primera revisión 24/03/2022)
En esta cuarta parte del mini manual de css, voy a intentar explicar los conceptos básicos sobre herencia y cascada de las hojas de estilo.

También, y por fin, explicar la otra forma de utilizar las hojas de estilo, dentro del propio documento html. Me faltará poner unos cuántos ejemplos más y, más adelante, volver a este tema tan importante, pero con más detalle (cuando veamos más cosas…). Por ahora, solo una pequeña introducción; vamos allá:

Herencia y cascada

La cascada en CSS se refiere a la forma en que las reglas de estilo se suman y se aplican acumulativamente en un documento HTML o XML. Podemos crear una regla de estilo que se extienda por toda la página. Por ejemplo, es habitual establecer los colores del fondo y del texto en una regla para el cuerpo de la página. Pero más adelante, mejor dicho, más ‘abajo’, se pueden añadir nuevas reglas que afecten a la fuente o al tamaño del texto de los párrafos o los encabezados sin cambiar el color o el fondo.

Se puede dividir la cascada de CSS en diferentes hilos, de modo que un pie de página o una barra lateral tenga un aspecto diferente del contenido principal o del encabezado de la página. Os vuelvo a recomendar la lectura de este artículo al respecto: CSS – Herencia y cascada. ¿Y cómo funciona?:

Los estilos se extienden hacia abajo: Una regla de estilo aplicada al elemento <body> afecta a todo el interior de la página, a no ser que haya algo que la anule.
Los estilos son acumulativos: La mayoría de los valores de las propiedades se heredan, por lo que sólo hay que aplicar los nuevos.
Los estilos heredados pueden ser anulados: Cuando quiera tratar un elemento o sección de la página de forma diferente, puede crear reglas de estilo más detalladas y aplicarlas de forma selectiva. El valor !important después de una regla CSS anula los valores anteriores aplicados a un elemento. Así, se elimina la herencia y cascada de las hojas de estilo. Un ejemplo aplicado al elemento blockquote (para citas):
```
blockquote {
color: #666;
/* font-size: 18px; */
/* font-weight: bold; */
font-size: 15px;
font-style: italic;
line-height: 1.7;
margin: 0;
overflow: hidden;
/* padding: 0; */
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 10px !important;
background-color: #cff9fe;
border-color: #21618c #21618c #21618c;
border-width: 2px 5px 5px;
border-style: solid solid solid;
}
```
Orden de los estilos: En la mayoría de los casos, el orden de las reglas de estilo no importa. Sin embargo, la cascada juega un papel importante cuando hay un conflicto entre reglas. Como principio básico, las reglas de estilo que aparecen más abajo en una hoja de estilo o bloque.

La herencia nos permite declarar propiedades en elementos de nivel alto y que estas propiedades se transmitan a todos los elementos descendientes. Sólo algunas propiedades se heredan por defecto, pero la herencia puede forzarse mediante la palabra clave inherit.
La cascada soluciona los conflictos cuando varias declaraciones afectan a un elemento determinado. Las declaraciones importantes anulan a las que no lo son tanto. Entre declaraciones de igual importancia, la especificidad de la regla controla cuál se aplica. Y, si todas las demás son iguales, el orden de las fuentes supone la distinción definitiva. Fuente: https://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html</small<

Estilos ‘en línea’ (CSS inline); la otra forma de incluir CSS en un documento

La mayoría de las veces, y como ya hemos visto, debemos crear las reglas de estilo en una hoja de estilo externa adjunta a la página web. Pero los estilos pueden también pueden definirse en línea (la otra forma que nos faltaba por explicar), es decir, dentro de un documento HTML, en vez de en una hoja externa. Eso sí, siempre es mejor separar los estilos del contenido, por lo que la elección de la hoja externa siempre es la más adecuada.

Para utilizar los estilos en línea, podemos utilizar:

1) Un bloque de estilo dentro de nuestro documento HTML (estilo interno o incrustado). Es mejor añadirlo siempre en la cabecera de nuestros documento HTML, entre los tags <head> y </head>. Ejemplo:

<head>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: #FFF;
}
</style>
</head>

2) Un estilo aplicado directamente a un atributo dentro del documento HTML (estilo en línea o inline). Para ello, se utiliza el atributo style tras el elemento a modificar: <elemento style=”propiedad; valor”;>

Ejemplo de estilo aplicado directamente al elemento H1 (título 1) dentro del documento HTML:

<h1 style="font-family: Arial, Helvetica, sans-serif; color: #900;">
Heading with an Inline
Style</h1>

Con lo cual, ya tenemos definidas las 3 formas de utilizar CSS:

Externo: enlaza la hoja HTML a un archivo .css separado
Bloque ce CSS dentro del la página HTML
Interno o incrustado: añade directamente un estilo a un elemento concreto dentro del documento HTML

NOTA: Bueno, me faltará poner algunos cuántos ejemplos sobre herencia y cascada en CSS. A ver si lo hago pronto!