Las hojas de estilo en cascada o CSS están configuradas para que pueda tener muchas propiedades que afecten al mismo elemento. Algunas de esas propiedades pueden entrar en conflicto entre sí. Por ejemplo, puede establecer un color de fuente de color rojo en la etiqueta de párrafo y luego, más adelante, establecer un color de fuente de azul. ¿Cómo sabe el navegador de qué color hacer los párrafos? Esto se decide por la cascada.
Tipos de hojas de estilo
Hay tres tipos diferentes de hojas de estilo:
- Hojas de estilo del autor
- Estas son hojas de estilo creadas por el autor de la página web. Son lo que la mayoría de la gente piensa cuando piensa en las hojas de estilo CSS.
- Hojas de estilo del usuario
- Las hojas de estilo del usuario son establecidas por el usuario de la página web. Esto permite al usuario tener más control sobre cómo se muestran las páginas.
- Hojas de estilo del agente de usuario
- Estos son estilos que el navegador web aplica a la página para ayudar a mostrar esa página. Por ejemplo, en XHTML, la mayoría de los agentes de usuario visuales muestran la etiqueta como texto en cursiva. Esto se define en la hoja de estilo del agente de usuario.
Las propiedades que se definen en cada una de las hojas de estilo anteriores tienen un peso. Por defecto, la hoja de estilo del autor tiene el mayor peso, seguida por la hoja de estilo del usuario y, finalmente, por la hoja de estilo del agente de usuario. La única excepción a esto es con la regla! Importante en una hoja de estilo de usuario. Esto tiene más peso que la hoja de estilo del autor.
Orden en cascada
Para resolver conflictos, los navegadores web utilizan el siguiente orden de clasificación para determinar qué estilo tiene prioridad y se utilizará:
- Primero, busque todas las declaraciones que se aplican al elemento en cuestión y el tipo de medio asignado.
- Luego mira de qué hoja de estilo viene. Como arriba, las hojas de estilo del autor son primero, luego el usuario, luego el agente del usuario. Con los estilos de usuario importantes con mayor prioridad que los estilos de autor importantes.
- Cuanto más específico es un selector, más precedencia obtendrá. Por ejemplo, un estilo en "div.co p" tendrá una prioridad más alta que uno solo en la etiqueta "p".
- Finalmente, ordena las reglas por el orden en que fueron definidas. Las reglas que se definen más adelante en el árbol de documentos tienen mayor prioridad que las definidas anteriormente. Y las reglas de una hoja de estilo importada se consideran antes que las reglas directamente en la hoja de estilo.
