Ejercicio: Color, unidades y tipografía

⏱ 30 minutos
📶 Nivel: principiante

Objetivo

Dar a un artículo una tipografía cómoda y profesional: pila de fuentes, interlineado, ancho de lectura, color en HSL y un titular fluido.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

pagina.html

<article class="entrada">
  <h1>Guía para regar plantas</h1>
  <p class="resumen">Todo lo que necesitas saber para que tus plantas de interior estén sanas.</p>
  <p>El riego es el cuidado más importante. La mayoría de las plantas de interior mueren por exceso de agua, no por falta. Toca la tierra antes de regar.</p>
  <p class="nota">Consejo: usa agua a temperatura ambiente.</p>
</article>

✏️ Prueba tu CSS aquí (opcional)

Código (edítalo)

<style>
  /* escribe tu CSS */
</style>
<article class="entrada">
  <h1>Guía para regar plantas</h1>
  <p class="resumen">Todo lo que necesitas saber para que tus plantas de interior estén sanas.</p>
  <p>El riego es el cuidado más importante. La mayoría de las plantas de interior mueren por exceso de agua, no por falta. Toca la tierra antes de regar.</p>
  <p class="nota">Consejo: usa agua a temperatura ambiente.</p>
</article>

Resultado

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Define en body: font-family: Georgia, serif, font-size: 1.125rem y line-height: 1.7.
Haz que el h1 use font-family: system-ui, sans-serif, font-weight: 800, line-height: 1.15 y un tamaño fluido con clamp(1.75rem, 1rem + 4vw, 3rem).
Haz que .resumen tenga color: hsl(243 75% 45%) y font-size: 1.25rem.
Limita el ancho del article a max-width: 65ch y centra con margin-inline: auto.
Haz que .nota esté en cursiva, con letter-spacing: 0.02em y color #475569.
Añade text-wrap: balance a los títulos.
Pon margin: 0 al body y usa rem en todos los tamaños de letra (nada en px).

💡 Pista 1: ¿cómo escribo el color en HSL?

Con la sintaxis moderna: hsl(243 75% 45%). El tono va primero (sin unidad), luego la saturación y la luminosidad con %.

💡 Pista 2: ¿cómo centro un bloque con `max-width`?

margin-inline: auto (o margin: 0 auto) centra horizontalmente un bloque que tiene un ancho limitado.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código CSS

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

estilos.css

body {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
}

article {
  max-width: 65ch;
  margin-inline: auto;
}

h1 {
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.75rem, 1rem + 4vw, 3rem);
  text-wrap: balance;
}

.resumen {
  color: hsl(243 75% 45%);
  font-size: 1.25rem;
}

.nota {
  font-style: italic;
  letter-spacing: 0.02em;
  color: #475569;
}

💡 🏁 Reto extra (opcional)

Elige una fuente de Google Fonts, cárgala en el <head> de una copia de tu página y compara el resultado con Georgia. ¿Qué pesos necesitas realmente?