Estilos en cascada

Por qué se llaman estilos en cascada
Propiedades escritas en diferentes sitios
- Dónde pueden aparecer las propiedades de estilo
- Reglas de aplicación de los estilos
Elementos dentro de otros
Reglas distintas que se aplican al mismo elemento

Por qué se llaman estilos en cascada

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.

Volver al principio de la página

Propiedades escritas en diferentes sitios

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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>No title</title>
  <meta name="generator" content="amaya X.X, see http://www.w3.org/Amaya/" />
  <link href="estilo.css" rel="stylesheet" type="text/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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>No title</title>
  <meta name="generator" content="amaya X.X, see http://www.w3.org/Amaya/" />
  <style type="text/css">
    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.

Volver al principio de la página

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>).

Volver al principio de la página

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 { 
  border: black 3px solid; color: red; 
}

Esto es un párrafo dentro de una división.

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; }	Esto es un párrafo dentro de una división.
	p { color: black; } div { border: black 3px solid; color: red; }	Esto es un párrafo dentro de una división.

Volver al principio de la página

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.

p#nuevo { 
  color: red; 
}

p { 
  color: black; 
}

Esto es un párrafo con atributo id "nuevo"

Esto es un párrafo sin atributo id.

p { 
  color: black; 
}

p#nuevo { 
  color: red; 
}

Esto es un párrafo con atributo id "nuevo"

Esto es un párrafo sin atributo id.

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 dos atributos id.

div#viejo { 
  border: black 3px solid; 
  margin: 2px; 
  padding: 2px; 
}

div p#nuevo { 
  color: red; 
}

div#viejo p#nuevo { 
  color: black; 
}

Esto es un párrafo con atributo id "nuevo" dentro de una división con atributo id "viejo"

Esto es un párrafo sin atributo id.

div#viejo { 
  border: black 3px solid; 
  margin: 2px;
  padding: 2px; 
}

div#viejo p#nuevo { 
  color: black; 
}

div p#nuevo { 
  color: red; 
}

Esto es un párrafo con atributo id "nuevo" dentro de una división con atributo id "viejo"

Esto es un párrafo sin atributo id.

Número de otros atributos y pseudo-clases en el selector

El ejemplo siguiente muestra dos selectores con el mismo número do 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.

	div.viejo { border: black 3px solid; margin: 2px; padding: 2px; } div.viejo p { color: red; } div p { color: black; }	Esto es un párrafo dentro de una división con atributo class "viejo". Esto es un párrafo que no está dentro de ninguna división..
	div.viejo { border: black 3px solid; margin: 2px; padding: 2px; } div p { color: black; } div.viejo p { color: red; }	Esto es un párrafo dentro de una división con atributo class "viejo". Esto es un párrafo que no está dentro de ninguna división..

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.

	div { border: black 3px solid; margin: 2px; padding: 2px; } div p { color: red; } p { color: black; }	Esto es un párrafo dentro de una división. Esto es un párrafo que no está dentro de ninguna división..
	div { border: black 3px solid; margin: 2px; padding: 2px; } p { color: black; } div p { color: red; }	Esto es un párrafo dentro de una división. Esto es un párrafo que no está dentro de ninguna división..

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.

	li { color: black; } ul li { color: red; }	Esto es un elemento de lista
	ul li { color: red; } li { color: black; }	Esto es un elemento de lista

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.

p.nuevo { 
  color: black; 
}

.nuevo { 
  color: red; 
}

Esto es un párrafo de clase "nuevo".

Esto es un párrafo sin clase.

.nuevo { 
  color: red; 
}

p.nuevo { 
  color: black; 
}

Esto es un párrafo de clase "nuevo".

Esto es un párrafo sin clase.

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; 
  margin: 2px; 
  padding: 2px; 
}

div p { 
  color: red; 
}

div p { 
  color: black; 
}

Esto es un párrafo dentro de una división.

div { 
  border: black 3px solid; 
  margin: 2px; 
  padding: 2px; 
}

div p { 
  color: black; 
}

div p { 
  color: red; 
}

Esto es un párrafo dentro de una división.

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.

	p.viejo { color: red; } p.nuevo { color: black; }	Esto es un párrafo con atributo class "viejo" y "nuevo"
	p.nuevo { color: black; } p.viejo { color: red; }	Esto es un párrafo con atributo class "viejo" y "nuevo"

Volver al principio de la página

Autor: Bartolomé Sintes Marco
Última modificación: 7 de enero de 2010