Lección 2: Fundamentos y cascada de CSS: Ejercicio de sintaxis

Explicación del concepto

Esta lección es un ejercicio práctico para escribir reglas CSS básicas de forma limpia y consistente. El objetivo no es construir un componente completo todavía, sino familiarizarse con la estructura de selector, propiedad y valor. Practicarás haciendo ediciones intencionales, verificando el resultado visual y manteniendo tus reglas legibles. Un principiante que puede escribir reglas pequeñas con confianza aprende mucho más rápido en lecciones posteriores de maquetación y diseño responsivo.

Dónde poner el código

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

Referencia de comandos

• Practica cambiando una propiedad a la vez para que el efecto de cada edición sea obvio.
• Renombra o reagrupa las reglas solo después de que la versión actual funcione como se espera.
• Verifica el espaciado, el `border` y el estilo del texto por separado en lugar de cambiar todo a la vez.
• Identifica un lugar donde un nombre de selector más claro mejora la legibilidad de inmediato.

Guía paso a paso

1. Crea una tarjeta simple en HTML y conéctala al CSS inicial.
2. Edita el `padding` y el `border` primero para que puedas ver claramente la estructura de la caja.
3. Ajusta los estilos del título y del texto sin cambiar los nombres de los selectores.
4. Comete un error intencional en una propiedad o valor, luego corrígelo después de identificar el problema.
5. Revisa el CSS final y elimina cualquier cosa que no contribuya a la tarjeta.

Ejercicios prácticos

• Construye una caja de notificación con un título y un mensaje usando el mismo patrón de escritura de reglas.
• Crea una segunda variante de tarjeta cambiando solo algunos valores, no la estructura completa.
• Agrega un estado `hover` o un estilo de énfasis sin dificultar la lectura de la hoja de estilos.

Retos de código

• Escribe dos tarjetas visualmente diferentes manteniendo las reglas compartidas fáciles de identificar.
• Mejora el CSS inicial para que otro principiante pueda escanearlo y entenderlo rápidamente.

Mini tareas de práctica

• Cambia el nombre de un selector por algo más claro.
• Prueba un ajuste de espaciado y anota la diferencia visual.
• Escribe una oración que describa qué estiliza el CSS inicial.