1. La Cascada y el origen de los estilos
Qué es: La cascada determina qué estilos se aplican cuando hay múltiples reglas para el mismo elemento. Los estilos pueden venir de diferentes orígenes y aplicarse de tres formas distintas en tu código.
/* 1. ESTILOS DEL NAVEGADOR (User Agent Stylesheet) */
/* Si NO defines estilos, el navegador aplica los suyos por defecto */
<p>Este texto tiene el color y tamaño que el navegador decide</p>
/* Si NO defines estilos, el navegador aplica los suyos por defecto */
<p>Este texto tiene el color y tamaño que el navegador decide</p>
/* 2. ESTILOS DEL AUTOR - Archivo CSS externo (menor prioridad) */
/* archivo: estilos.css */
p {
color: blue;
}
<!-- En el HTML -->
<link rel="stylesheet" href="estilos.css">
/* archivo: estilos.css */
p {
color: blue;
}
<!-- En el HTML -->
<link rel="stylesheet" href="estilos.css">
/* 3. ESTILOS DEL AUTOR - En el <head> con <style> */
/* Sobrescribe los estilos del archivo externo */
<head>
<style>
p {
color: green; /* Gana sobre el archivo externo */
}
</style>
</head>
/* Sobrescribe los estilos del archivo externo */
<head>
<style>
p {
color: green; /* Gana sobre el archivo externo */
}
</style>
</head>
<!-- 4. ESTILOS INLINE (mayor prioridad) -->
<!-- Ganan sobre archivo externo y <style> en el head -->
<p style="color: red;">Este texto será rojo</p>
<!-- Ganan sobre archivo externo y <style> en el head -->
<p style="color: red;">Este texto será rojo</p>
/* 5. !IMPORTANT (máxima prioridad) */
/* Rompe todas las reglas anteriores */
p {
color: purple !important; /* Gana incluso sobre inline */
}
/* Rompe todas las reglas anteriores */
p {
color: purple !important; /* Gana incluso sobre inline */
}
/* ORDEN DE PRIORIDAD (de menor a mayor): */
/* 1. User Agent (navegador) */
/* 2. Archivo CSS externo */
/* 3. <style> en el <head> */
/* 4. Estilos inline */
/* 5. !important (cualquier origen) */
/* 1. User Agent (navegador) */
/* 2. Archivo CSS externo */
/* 3. <style> en el <head> */
/* 4. Estilos inline */
/* 5. !important (cualquier origen) */
2. Especificidad
Qué es: Sistema de puntuación que determina qué regla CSS se aplica cuando hay conflicto. Se calcula como (inline, IDs, clases/atributos/pseudoclases, elementos/pseudoelementos). Gana la regla con MAYOR especificidad. A igual especificidad, gana la última declarada.
/* Especificidad: 0,0,0,1 (elemento) */
/* Pierde contra clases, IDs e inline */
p {
color: blue;
}
/* Pierde contra clases, IDs e inline */
p {
color: blue;
}
/* Especificidad: 0,0,1,0 (clase) */
/* Gana sobre elementos, pierde contra IDs e inline */
.texto {
color: red;
}
/* Gana sobre elementos, pierde contra IDs e inline */
.texto {
color: red;
}
/* Especificidad: 0,1,0,0 (ID) */
/* Gana sobre clases y elementos, pierde contra inline */
#principal {
color: green;
}
/* Gana sobre clases y elementos, pierde contra inline */
#principal {
color: green;
}
/* Especificidad: 0,1,1,1 (ID + clase + elemento) */
/* Gana sobre todos los anteriores, pierde contra inline */
div#principal .texto {
color: purple;
}
/* Gana sobre todos los anteriores, pierde contra inline */
div#principal .texto {
color: purple;
}
<!-- Especificidad: 1,0,0,0 (inline) -->
<!-- Gana sobre TODO (salvo !important) -->
<p style="color: orange;">Texto naranja</p>
<!-- Gana sobre TODO (salvo !important) -->
<p style="color: orange;">Texto naranja</p>
/* !important rompe la especificidad normal */
/* Gana sobre TODO, incluso inline */
p {
color: black !important;
}
/* Gana sobre TODO, incluso inline */
p {
color: black !important;
}
3. Herencia
Qué es: Algunas propiedades CSS se transmiten automáticamente de padres a hijos. Propiedades como color y font-family se heredan, pero margin, padding y border NO
/* Las propiedades de texto se heredan */
body {
color: blue; /* Todos los textos serán azules */
font-family: Arial; /* Se hereda */
}
body {
color: blue; /* Todos los textos serán azules */
font-family: Arial; /* Se hereda */
}
/* El margin NO se hereda */
div {
margin: 20px; /* Los hijos NO heredan este margin */
}
div {
margin: 20px; /* Los hijos NO heredan este margin */
}
/* Forzar herencia con inherit */
.hijo {
border: inherit; /* Hereda el borde del padre */
}
.hijo {
border: inherit; /* Hereda el borde del padre */
}
/* Valores especiales */
.elemento {
color: initial; /* Valor inicial del navegador */
margin: unset; /* inherit si se hereda, initial si no */
}
.elemento {
color: initial; /* Valor inicial del navegador */
margin: unset; /* inherit si se hereda, initial si no */
}
4. Orden de declaración
Qué es: Cuando dos reglas tienen la misma especificidad, gana la que aparece última en el código
p {
color: blue;
}
p {
color: red; /* Gana esta porque está después */
}
color: blue;
}
p {
color: red; /* Gana esta porque está después */
}
/* Orden de los archivos CSS también importa */
<link rel="stylesheet" href="primero.css">
<link rel="stylesheet" href="segundo.css"> <!-- Este sobrescribe al primero -->
<link rel="stylesheet" href="primero.css">
<link rel="stylesheet" href="segundo.css"> <!-- Este sobrescribe al primero -->