CSS significa Hojas de Estilo en Cascada.
La parte «Hojas de Estilo» es fácil de entender. Es algo que usamos para dar estilo a nuestro HTML.
Pero… ¿cascada?
¿Qué significa?
La cascada es un concepto fundamental de CSS. Después de todo, está en el nombre mismo, la primera C de CSS – Hojas de Estilo en Cascada – debe ser algo importante.
¿Qué significa?
La cascada es el proceso o algoritmo que determina las propiedades aplicadas a cada elemento en la página. Intenta converger a partir de una lista de reglas CSS que están definidas en varios lugares.
Lo hace teniendo en cuenta:
- Especificidad
- Importancia
- Herencia
- Orden de la regla CSS en el archivo
También se encarga de resolver conflictos.
Dos o más reglas CSS en competencia para la misma propiedad aplicadas al mismo elemento deben ser elaboradas según la especificación CSS, para determinar cuál debe aplicarse.
Incluso si solo tienes un archivo CSS cargado por tu página, hay otro CSS que va a ser parte del proceso. Tenemos el CSS del navegador (agente de usuario). Los navegadores vienen con un conjunto predeterminado de reglas.
Luego entra en juego tu CSS.
Luego, el navegador aplica cualquier hoja de estilo de usuario, que también podría ser aplicada por extensiones del navegador.
Todas esas reglas entran en juego al renderizar la página.
Ahora veremos los conceptos de especificidad y herencia.
¿Qué sucede cuando un elemento es afectado por múltiples reglas, con diferentes selectores, que afectan la misma propiedad?
Por ejemplo, hablemos de este elemento:
<p class="nombre-perro">Roger</p>
Podríamos tener:
.nombre-perro {
color: yellow;
}
y otra regla que apunta a p, que establece el color en otro valor:
p {
color: red;
}
Y otra regla que apunta a p.nombre-perro:
p.nombre-perro {
color: red;
}
¿Qué regla tomará precedencia sobre las demás, y por qué?
Ingresa la especificidad.
La regla más específica será la ganadora.
Si dos o más reglas tienen la misma especificidad, la que aparece al final es la que gana.