Lección 1: Fundamentos de CSS y la cascada: Recorrido conceptual

Explicación del concepto

Esta lección presenta las dos ideas de las que depende cada archivo CSS: los selectores y la cascada. Verás cómo una regla llega a un elemento, por qué una declaración prevalece sobre otra y cómo pequeños cambios de estilo pueden afectar una página entera. En lugar de memorizar teoría de forma aislada, estilizarás una pequeña página y observarás el resultado después de cada edición. Al final, deberías sentirte cómodo leyendo un conjunto de reglas simple, prediciendo qué estilos se aplican y realizando pequeños cambios sin adivinar.

Dónde poner el código

1. Comienza con variables y entradas. Coloca las reglas de estilo en selectores de clase reutilizables.
2. Agrega la lógica de procesamiento en la sección central.
3. Finaliza con la salida y una validación rápida.

Referencia de comandos

• Cambia una propiedad en la regla de `body` y observa qué partes de la página se actualizan automáticamente.
• Agrega una regla para `h1` o `p`, luego compárala con los estilos heredados de `body`.
• Crea una segunda regla que apunte al mismo elemento y observa qué declaración prevalece.
• Anota un ejemplo de cuándo los estilos base compartidos facilitan el mantenimiento de una página.

Guía paso a paso

1. Comienza con una página que contenga un encabezado y un párrafo, luego aplica el CSS inicial exactamente como está escrito.
2. Observa qué propiedades se heredan de `body` y cuáles deben declararse directamente en cada elemento.
3. Agrega una nueva regla para el encabezado y predice el resultado antes de actualizar la página.
4. Crea una declaración en conflicto a propósito para que puedas ver cómo la cascada decide el estilo final.
5. Finaliza resumiendo qué regla fue global, qué regla fue específica y por qué esa distinción es importante.

Ejercicios prácticos

• Estiliza un artículo corto con un encabezado, párrafo y enlace usando solo selectores de elemento.
• Crea una segunda versión donde el `body` establezca la tipografía base y las reglas individuales manejen el énfasis.
• Crea un pequeño ejemplo que demuestre la herencia cambiando el color del texto en un solo lugar.

Retos de código

• Escribe dos reglas en conflicto para el mismo elemento y explica por qué el resultado final es correcto.
• Refactoriza una hoja de estilos inicial desordenada en estilos base más claros y algunas anulaciones específicas.

Mini tareas de práctica

• Agrega una regla que cambie el espaciado, no el color.
• Escribe una nota de una línea explicando qué hace la cascada.
• Prueba un pequeño ajuste y confirma qué elementos cambiaron.