Unidad 17. Estilos CSS Avanzados (VI)

17.6. Orden de aplicación de los estilos CSS

Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál se aplica? Bueno, realmente los estilos se van sumando. Por lo que si no repetimos ninguna propiedad, el estilo final de un elemento será la suma de todos los estilos que afecten al elemento.

Pero ¿qué ocurre si repetimos una propiedad? Como norma general, prevalecerá el estilo más concreto sobre el más genérico. Por ejemplo, si en la hoja de estilo establecemos el texto de los párrafos en rojo, y en la cabecera de la página definimos el color de los párrafos en azul, prevalecerá éste último, ya que es más concreto, se refiere sólo a los párrafos de esa página. Y si en un párrafo de la página, en el atributo style indicamos el color de texto verde, prevalecerá éste por ser el más concreto de todos.

Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más concreto que p, ya que se refiere sólo a los párrafos con esa clase. Y p#titulo sería aún más concreto, ya que se refiere directamente a un determinado párrafo. Lo mismo ocurre al anidar los selectores, p.inicio span es más concreto que poner sólo span.

En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una hoja de estilo, se tomará en cuenta la última, que machacará a las anteriores. Por ejemplo, poner p {margin: 20px; margin-bottom: 5px;} sería como poner p {margin: 20px 20px 5px;}.

En cualquier momento podemos saltarnos el orden de prioridad de los estilos, añadiendo !important al final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:

p { color: blue !important;
    color: red;
}

El párrafo debería de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al poner !important, hace que el texto sea rojo.

Además, los elementos hijos heredan las propiedades. Así, si definimos el color rojo para el texto de una capa, todos los elementos de la capa mostrarán el texto en color rojo, a no ser que tengan otro estilo definido.

Por todo esto, a veces podemos no saber dónde hemos definido la propiedad que hace que un elemento se vea de tal o cual forma. En cualquier momento podemos ver qué propiedades afectan al estilo y dónde están definidas desde el panel Diseñador de CSS.

 Cursos Informática Gratuitos