Cuando tenemos muchos elementos y etiquetas en nuestro código HTML, agregar múltiples estilos en CSS puede volverse una tarea compleja y contradictoria. En este post, te mostramos cómo se aplican los múltiples estilos en CSS, a cuáles se les da preferencia y cómo priorizar el estilo que deseas.
Herencia
Lo primero que debemos tener en cuenta es que los estilos tienen una característica llamada herencia. Al igual que la herencia en la vida real, esta característica determina si las propiedades CSS se pasarán de un elemento padre a un elemento hijo. Esto quiere decir que una etiqueta que está contenida dentro de otra puede tener las mismas propiedades del elemento en el que se encuentra.
Las propiedades que normalmente se heredan son aquellas que afectan al contenido. Las propiedades como el color, el tipo de letra (font-type), el tamaño de letra (font-size) y las decoraciones de texto afectan al contenido dentro del elemento, no al elemento en sí. En cambio, las propiedades que afectan al contenedor, como el margen, padding y borde, no suelen heredarse.
Si tienes dudas acerca de una propiedad específica, te recomendamos buscar la propiedad concreta en la página oficial de MDN, donde podrás ver si se hereda o no.
Cascada
El principio de cascada es la base del lenguaje CSS (Cascading Style Sheets). Este principio quiere decir que el navegador leerá nuestra hoja de estilo de arriba abajo y aplicará los múltiples estilos en CSS siguiendo ese orden. Si hay una propiedad al final del archivo CSS que reescribe una regla al inicio del archivo, el navegador aplicará la propiedad final, porque es lo último que ha leído.
Sin embargo, el principio de cascada no se reduce a un modo de lectura. En realidad, lo primero que aplica el navegador son las características del agente de usuario (user agent), que son las características del navegador definidas por defecto o definidos por el usuario. Después de esto, lee los bloques de CSS externo y embebido de arriba abajo. Finalmente, el navegador aplicará los estilos en línea. Al ser estos los últimos que aplica, serán los que tienen prioridad sobre todas las demás propiedades.
Especificidad
A la hora de ordenar los múltiples estilos en CSS, el navegador suma al principio de cascada el principio de especificidad. La especificidad se refiere a cómo de específica es la etiqueta de un elemento. Cuanto más específica sea la etiqueta, más prioridad se le otorga a la hora de representar sus estilos en la página web.Ten en cuenta que cuando estás aplicando múltiples estilos en CSS, hay un orden de prioridad en relación a los selectores que usas.
De menor a mayor especificad, los selectores se ordenan del siguiente modo:
- Selectores de tipo: selectores como <p> y <h1> y seudoelementos como
::beforey::afterson poco específicos. En una sola página HTML hay varios párrafos y cabeceras, por lo que no hay un nivel de especificidad suficiente como para priorizar esta etiqueta sobre otras. - Selectores de clase: los selectores de clase, de atributo y las seudoclases tienen prioridad sobre los selectores de tipo y los seudoelementos. Aunque en una página hay varios párrafos, cada párrafo puede tener una etiqueta de clase diferente. Esto le otorga mayor especificidad y, por tanto, prioridad.
- Selectores ID: los selectores ID tienen prioridad sobre el selector de clase porque identifican partes de un elemento y son más específicos.
- Estilos en línea: como mencionamos en el principio de cascada, los estilos en línea siempre tendrán prioridad por encima de los demás elementos de un bloque CSS. Por este motivo debes tener cuidado al agregar un estilo en línea, pues el navegador siempre lo leerá como el más importante.
Ten en cuenta que el orden de especificidad es aún más importante que el orden de lectura dado por la cascada. Por ejemplo, podemos poner un selector de clase con la propiedad color rojo encima de un selector de tipo con la propiedad color azul, pero el texto seguirá viéndose rojo porque el selector de clase es más específico.
Ya que los elementos pueden tener más de una clase y más de una etiqueta, el orden de prioridad de múltiples estilos en CSS puede verse alterado fácilmente. Para calcular la especificidad de tus propiedades, te recomendamos la página web Specificity Calculator.
Hay algunos que recomiendan utilizar la etiqueta !important para definir los elementos que quieren que tengan prioridad. Esta etiqueta rompe la cadena de especificidad y prioriza el elemento sobre todos los demás. No es recomendable utilizarla muy a menudo porque es una solución a corto plazo. Esta etiqueta puede generarte problemas a la hora de cambiar los estilos de tu página web en el futuro. Antes de insertar esta etiqueta, te recomendamos añadir clases extra para hacer que tus elementos sean más específicos.
¿Quieres seguir aprendiendo?
¡Es hora de que pongas en práctica lo que sabes sobre los múltiples estilos en CSS! Para profundizar en el tema, tanto de forma teórica como práctica, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. Allí aprenderás, entre muchas otras cosas, cómo crear y estilizar tu propia página web usando HTML y CSS. ¡Apúntate!
