Prioridades de las etiquetas CSS

Publicado el en la categoría Diseño y Programación

Prioridades de las etiquetas CSSCuando analizamos un sitio web, es muy común encontrarnos con diferentes etiquetas CSS aplicadas a un mismo elemento HTML. El navegador se encarga de recopilar toda la información relativa a los estilos y la aplica a la página utilizando unos valores y descartando otros. El artículo de hoy, pretende ofrecer un poco de luz en como los navegadores interpretan esta información.

Etiquetas CSS por defecto

Todos los navegadores tiene por defecto una serie de reglas CSS preestablecidas que serán aplicadas en el caso de que no se defina en ningún momento una propiedad para algún elemento HTML.

Debido a las diferentes implementaciones de estas características “base” de los navegadores, es posible que una página web básica, se visualice de forma diferente en dos navegadores distintos. Esta ha sido la principal razón por la que actualmente la mayoría de diseños web cuentan con un fichero que “resetea” los valores CSS del navegador. Si quieres mas información al respecto, te recomendamos que visualices nuestro artículo Que es un Reset CSS

Prioridad de las etiquetas CSS

Según quien las defina, las etiquetas CSS tienen un grado de prioridad. El orden de menor a mayor seria:

  • Navegador
  • Hojas de estilo
  • Preferencias del usuario
  • Hojas de estilo añadiendo !important
  • Preferencias del usuario añadiendo !important

En el orden de prioridad, las características por defecto del navegador son las que tienen menos peso, por eso, en el momento que definamos alguna propiedad para un elemento de nuestra página, será este último el que el navegador aplicará.

Las preferencias del usuario prevalecerán sobre las hojas de estilo de la página. Esta funcionalidad es interesante para usuarios con alguna discapacidad que necesiten ciertas características cuando visualizan páginas web, por ejemplo un tamaño de texto grande.

Como punto final en esta jerarquía, encontramos la opción !important, que provocará que la propiedad CSS tenga mas importancia y por tanto sea la que se visualice. Por ejemplo:

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

Aunque existen dos propiedades iguales, y por defecto se utilizaría la segunda, al añadir !important estamos forzando a que sea dicha propiedad la utilizada, por tanto el color de texto aparecería azul.

Preferencia para un mismo elemento en la misma jerarquía

Acabamos de ver cual es el orden de preferencia jerárquico, pero, ¿que ocurrirá cuando existan varias definiciones para un mismo elemento al mismo nivel jerárquico?

Pues en realidad, esta es la opción mas común y si visualizamos cualquier página web con alguna herramienta de desarrollo (Inspector de código, Firebug, etc.) veremos las definiciones de las características activas, y a continuación mas estilos CSS tachados, lo que significa que se han sobreescrito.

En una misma hoja de estilos, cuando se superponen dos definiciones iguales, siempre prevalecerá el que se ha definido mas tarde. En cambio, cuando hay varios elementos apuntan al mismo elemento, sea en el mismo fichero u en otro distinto, deberemos tener en cuenta de nuevo, un orden jerárquico:

  • Estilo en línea
  • ID
  • Clases
  • Elemento HTML

Si tenemos como ejemplo:

#cabecera h1{
color:blue;
}
h1.titulo{
color:red;
}
h1{
color:green;
}

Obtendremos como resultado un encabezado de color azul, ya que según el orden de prioridad de las etiquetas CSS, vemos que tendrá mas peso al contener un ID. En cambio la segunda opción que tiene una clase y la tercera opción, que simplemente contiene al elemento, serían ignoradas.

Esperamos que éste tutorial os ayude en vuestros desarrollos.

 

Facebooktwittergoogle_plus