Las hojas de estilo se llaman hojas de estilo "en cascada" porque:
Las propiedades de estilo pueden estar escritas en varios sitios (en varios lugares de la página web o de la hoja de estilo) y dependiendo del sitio, afectan a más o menos elementos.
Cuando un elemento está contenido en otro (por ejemplo, un párrafo <p> dentro de una división <div>), al elemento de dentro se le aplican también las propiedades definidas para el elemento de fuera (al párrafo <p> se le aplicarían las propiedades definidas para la división <div>).
Dos reglas distintas pueden ser de aplicación a un mismo elemento (por ejemplo, a un párrafo <p> con clase nombre, le es de aplicación tanto el selector .nombre como el selector p).
Si las propiedades (escritas en diferentes sitios o para diferentes elementos) no entran en conflicto, el navegador aplica todas las propiedades. Por ejemplo, si el color de fondo de un elemento está definido en un sitio y el tamaño de letra en otro sitio, el navegador aplicará ambas propiedades al elemento.
Pero si las propiedades entran en conflicto (por ejemplo, el color del fondo del elemento está definido en varios sitios con colores distintos), existen reglas para decidir qué propiedad tiene preferencia.
Dónde pueden aparecer las propiedades de estilo
Las propiedades de estilo pueden aparecer en tres lugares distintos:
en un archivo distinto a la página web (el archivo recibe el nombre de hoja de estilo)
En ese caso, la página web debe incluir un enlace (<link>) a la hoja de estilo, como muestra el ejemplo siguiente:
<head>
<meta charset="utf-8">
<title>Ejemplo de enlace a hoja de estilo</title>
<link rel="stylesheet" href="../varios/htmlcss.css" title="Mi estilo">
</head>
Las propiedades definidas en una hoja de estilo se aplican en todas las páginas web que enlacen a la misma hoja de estilo.
en la etiqueta <style> situada al principio de la página web (concretamente, en el bloque <head>)
En ese caso, la página web debe incluir una etiqueta <style> que contenga las propiedades de estilo, como muestra el ejemplo siguiente:
<head>
<meta charset="utf-8">
<title>Ejemplo de enlace a hoja de estilo</title>
<style>
body { background-color: red; }
</style>
</head>
Las propiedades definidas en la etiqueta <style> se aplican únicamente en la página que contiene a la etiqueta <style>.
en el atributo style de cualquier elemento
En ese caso, el elemento debe incluir el atributo style, como muestra el ejemplo siguiente:
<p>Esto es una párrafo normal y corriente.</p>
<p style="background-color:red">Este párrafo tiene el fondo de color rojo</p>
Las propiedades definidas en el atributo style de un elemento se aplican únicamente al elemento en el que se ha definido la etiqueta style.
Reglas de aplicación de los estilos
Si se define la misma propiedad para la misma etiqueta con el mismo selector en dos sitios distintos, las reglas de precedencia son las siguientes:
Las propiedades definidas en un atributo style se imponen a las propiedades definidas en la etiqueta <style>.
Las propiedades definidas en la etiqueta <style> se imponen a las propiedades definidas en una hoja de estilo enlazada.
Las propiedades definidas en un atributo style se imponen a las propiedades definidas en una hoja de estilo enlazada.
Además de estas propiedades definidas por el creador de la página web, hay que tener en cuenta que también se aplican las propiedades definidas en la hoja de estilo por defecto del navegador.
Si las propiedades se encuentran definidas en diferentes hojas de estilo, el navegador aplica el valor definido en la última hoja de estilo enlazada (es decir, en el último enlace <link> del <head>).
Elementos dentro de otros
Cuando un elemento está contenido en otro (por ejemplo, un párrafo <p> dentro de una división <div>), al elemento de dentro se le aplican también las propiedades definidas para el elemento de fuera.
En el ejemplo siguiente, el párrafo incluido dentro de la división se muestra de color rojo porque el párrafo está incluido dentro de la división.
<div>
<p>Esto es un párrafo dentro de una división.</p>
</div>
div {
border: black 3px solid; color: red;
}
Si una misma propiedad está definida para el elemento inferior y para el superior, se aplica el valor establecido para el elemento inferior.
En el ejemplo siguiente, el párrafo se muestra de color negro, independientemente del orden en que se escriban las reglas.
div {
border: black 3px solid;
color: red;
}
p {
color: black;
}
p {
color: black;
}
div {
border: black 3px solid;
color: red;
}
Reglas distintas que se aplican al mismo elemento
Dos reglas distintas se aplican a un mismo elemento cuando el elemento coincide con los selectores de ambas reglas. La regla que se aplica es la del selector de mayor especificidad. La especificidad de un selector se calcula atendiendo a los siguientes criterios:
Número de atributos id en el selector
Número de otros atributos y pseudo-clases en el selector (los pseudo-elementos se ignoran)
Número de elementos en el selector
Posición en la hoja de estilo
Estos criterios se aplican en orden, es decir, primero se comparan el número de atributos id de cada selector. Si un selector tiene más que el otro, se aplica esa regla, si el número es el mismo, entonces se calcula el segundo criterio (número de otros atributos y pseudo-clases). Y así sucesivamente.
A continuación se muestran varios ejemplos de aplicación de estas reglas.
Número de atributos id en el selector
El ejemplo siguiente muestra dos selectores con un número de atributos id diferente (1 o 0). Puede comprobarse que se aplica siempre el selector con atributo id, independientemente del orden en que aparezcan en la hoja de estilo.
<p id="nuevo">Esto es un párrafo con atributo id "nuevo"</p>
<p>Esto es un párrafo sin atributo id.</p>
p#nuevo {
color: red;
}
p {
color: black;
}
p {
color: black;
}
p#nuevo {
color: red;
}
El ejemplo siguiente muestra también dos selectores con un número de atributos id diferente (2 o 1). Puede comprobarse que se aplica siempre el selector con más atributos id, independientemente del orden en que aparezcan en la hoja de estilo.
Número de otros atributos y pseudo-clases en el selector
El ejemplo siguiente muestra dos selectores con el mismo número de atributos id (0), pero con un número diferente de atributos class (1 o 0). Puede comprobarse que se aplica siempre el selector con más atributos class, independientemente del orden en que aparezcan en la hoja de estilo.
div.viejo {
border: black 3px solid;
margin: 2px;
padding: 2px;
}
div.viejo p {
color: red;
}
div p {
color: black;
}
div.viejo {
border: black 3px solid;
margin: 2px;
padding: 2px;
}
div p {
color: black;
}
div.viejo p {
color: red;
}
Número de elementos en el selector
El ejemplo siguiente muestra dos selectores con un número diferente de elementos (2 o 1). Puede comprobarse que se aplica siempre el selector con más elementos, independientemente del orden en que aparezcan en la hoja de estilo.
div {
border: black 3px solid;
margin: 2px;
padding: 2px;
}
div p {
color: red;
}
p {
color: black;
}
div {
border: black 3px solid;
margin: 2px;
padding: 2px;
}
p {
color: black;
}
div p {
color: red;
}
El ejemplo siguiente también muestra dos selectores con un número diferente de elementos (2 o 1). Puede comprobarse que se aplica siempre el selector con más elementos, independientemente del orden en que aparezcan en la hoja de estilo.
li {
color: black;
}
ul li {
color: red;
}
ul li {
color: red;
}
li {
color: black;
}
El ejemplo siguiente también muestra dos selectores con un número diferente de elementos (1 o 0). Puede comprobarse que se aplica siempre el selector con más elementos, independientemente del orden en que aparezcan en la hoja de estilo.
p.nuevo {
color: black;
}
.nuevo {
color: red;
}
.nuevo {
color: red;
}
p.nuevo {
color: black;
}
Posición en la hoja de estilo
Si a un elemento le afectan dos selectores con la misma especificidad, el navegador aplica la propiedad que aparece después en la hoja de estilo.
El ejemplo siguiente muestra dos selectores idénticos. Puede comprobarse que se aplica siempre el selector que aparece después en la hoja de estilo. En este caso, la penúltima regla es superflua y puede eliminarse sin afectar al resultado.
div {
border: black 3px solid;
}
div p {
color: red;
}
div p {
color: black;
}
div {
border: black 3px solid;
}
div p {
color: black;
}
div p {
color: red;
}
El ejemplo siguiente muestra una situación diferente y más habitual. Se trata de un párrafo con dos clases. Puede comprobarse que se aplica siempre el selector que aparece después en la hoja de estilo.
