Introducción a CSS: cómo piensa el navegador al aplicar estilos
📚 Contenido de la guía ⌃
- El mapa mental: del CSS al píxel en pantalla 🧠➡️🖥️
- Cómo “piensa” CSS por dentro
- La cascada: quién gana cuando varias reglas dicen cosas distintas 💧
- Especificidad sin miedo: una forma simple de calcularla 🎯
- Herencia: estilos que se transmiten de padres a hijos 👨👩👧
- El modelo de caja y el flujo normal: dónde aterrizan los estilos 📦
- Cómo “leer la mente” del navegador al depurar CSS 🕵️♀️
- Conclusión: CSS es un motor de decisiones, no solo colores bonitos 🚀
¿Alguna vez has escrito una regla CSS, has guardado el archivo… y el navegador ha decidido ignorarte por completo? 🎨 Casi todos hemos pasado por ahí: cambias un color, ajustas un tamaño de fuente, recargas la página y nada parece responder.
La buena noticia: el navegador no es caprichoso. Sigue un proceso muy ordenado para decidir qué estilo aplicar en cada píxel. En esta guía vamos a ver cómo piensa el navegador al aplicar CSS: la cascada, la especificidad, la herencia y algunos trucos para “leerle la mente” usando las DevTools.
La meta no es que memorices todas las propiedades de CSS, sino que salgas con un modelo mental claro de lo que pasa entre esto…
.card {
color: #111827;
}…y el texto que ves en pantalla.
El mapa mental: del CSS al píxel en pantalla 🧠➡️🖥️
Muy simplificado, este es el recorrido que hace el navegador cuando aplica estilos:
- Lee tu HTML y construye el árbol del DOM (los nodos y su jerarquía).
- Lee todas las hojas de estilo (del navegador, del usuario y las tuyas).
- Para cada nodo del DOM, decide qué reglas coinciden con él.
- Resuelve los conflictos con la cascada y la especificidad.
- Aplica la herencia de ciertas propiedades desde los elementos padre.
- Con esos valores finales, calcula el layout (cajas) y dibuja la página.
Si entiendes estos pasos, los bugs de estilo dejan de ser magia negra y se convierten en un rompecabezas lógico.
Cómo “piensa” CSS por dentro
La cascada: quién gana cuando varias reglas dicen cosas distintas 💧
La palabra “Cascading” en Cascading Style Sheets no está ahí por capricho.
Cuando varias reglas intentan cambiar la misma propiedad (por ejemplo color), el navegador aplica la cascada para decidir.
En orden simplificado, el navegador mira:
- Origen: estilos del navegador, del usuario, tuyos, y si son
!importanto no. - Especificidad: qué tan “preciso” es el selector.
- Orden: si todo lo anterior empata, gana la regla que aparece más abajo en el CSS.
Con un ejemplo:
p {
color: gray;
}
.articulo p {
color: darkslategray;
}
#principal .articulo p {
color: black;
}El mismo párrafo coincide con las tres reglas, pero gana la última porque tiene mayor especificidad (usa un id, una clase y el tipo de elemento).
Especificidad sin miedo: una forma simple de calcularla 🎯
La especificidad es la forma que tiene el navegador de medir qué selector es más “fuerte”. Una regla muy útil para el día a día es esta:
- 1 punto por cada selector de tipo (p, h1, li…), pseudo-elemento (::before).
- 10 puntos por cada clase (.btn), atributo ([type="email"]) o pseudo-clase (:hover).
- 100 puntos por cada id (#main).
- Los estilos inline (en el atributo
style) van por encima de todo lo anterior.
Ejemplos:
| Selector | Cálculo mental | Puntuación aproximada |
|---|---|---|
p |
1 tipo | 1 |
.card |
1 clase | 10 |
.card h2 |
1 clase (10) + 1 tipo (1) | 11 |
#principal .card h2 |
1 id (100) + 1 clase (10) + 1 tipo (1) | 111 |
En igualdad de condiciones, el navegador elige siempre la regla con mayor puntuación de especificidad.
p { color: gray; } /* 1 */
.card p { color: blue; } /* 11 */
#main p { color: red; } /* 101 */<main id="main" class="card">
<p>Hola CSS</p>
</main>
El párrafo coincide con las 3 reglas.
Gana #main p (101).
Resultado: Texto Rojo.
Herencia: estilos que se transmiten de padres a hijos 👨👩👧
Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!