Selectores y la cascada
Si HTML es el esqueleto, CSS es todo lo demás: color, tipografía, espaciado, disposición. En este módulo aprendes cómo "apuntar" a los elementos que quieres estilizar, y cómo decide el navegador qué regla gana cuando varias compiten.
¿Qué es CSS y cómo se conecta a HTML?
CSS son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada). Mientras que HTML describe qué es cada cosa, CSS describe cómo se ve. Hay tres formas de aplicarlo a un documento:
Estilo en línea, directamente en la etiqueta. Rápido para pruebas, pero mal para mantenimiento — evítalo en proyectos reales.
Un bloque de CSS dentro del <head> del propio documento. Útil para páginas pequeñas o de una sola vista (como estos playgrounds).
Enlaza un archivo .css externo. La forma recomendada en cualquier proyecto real: separa contenido (HTML) de presentación (CSS) y permite reutilizar el mismo archivo en varias páginas.
La sintaxis básica
Toda regla CSS sigue la misma forma: un selector, y entre llaves, una lista de propiedades con su valor.
p es el selector (a qué le aplicamos
el estilo), y color / font-size
son propiedades con su valor correspondiente.
Tipos de selectores
Selecciona todas las etiquetas de ese tipo. Ej: p, h1.
Selecciona todos los elementos con ese atributo class, sin importar la etiqueta. Reutilizable en cuantos elementos quieras.
Selecciona un único elemento por su atributo id (que debe ser único en la página).
El selector universal: aplica a absolutamente todo. Se suele usar para resets básicos.
Como norma general: usa clases para casi todo (son reutilizables en varios elementos), y reserva los id para casos muy puntuales donde de verdad hay un único elemento (como un ancla de navegación).
Combinar selectores
Selector descendiente: selecciona <p> que estén dentro de un <div>, sin importar cuántos niveles de profundidad.
Selector de grupo: aplica el mismo bloque de estilos a varios selectores distintos, separados por comas.
La cascada: ¿qué regla gana?
Cuando dos reglas distintas apuntan al mismo elemento con la misma propiedad, el navegador necesita decidir cuál aplicar. Lo resuelve con tres criterios, en este orden de importancia:
- Especificidad: un id (100 puntos) pesa más que una clase (10 puntos), que a su vez pesa más que un elemento (1 punto).
- Orden en el código: si dos reglas tienen la misma especificidad, gana la que aparece más abajo en el CSS.
- !important: fuerza a que una propiedad gane pase lo que pase. Es un martillo, no un bisturí — úsalo solo como último recurso.
Abusar de !important para "arreglar" un estilo que
no se aplica. Casi siempre es síntoma de un problema de especificidad más
profundo. Antes de usarlo, intenta entender por qué otra regla está ganando.
Herencia
Algunas propiedades (sobre todo las relacionadas con texto: color,
font-family, font-size) se
heredan automáticamente de un elemento padre a sus hijos. Otras (como
border o margin) no se
heredan nunca — tienen que definirse explícitamente en cada elemento.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué selector tiene mayor especificidad?
2. ¿Cuál es la forma recomendada de aplicar CSS en un proyecto real?
3. ¿Por qué conviene evitar !important como primera solución?