Ejercicio: Cómo funciona CSS

⏱ 25 minutos
📶 Nivel: principiante

Objetivo

Estilizar una tarjeta aplicando la cascada, la herencia y un reseteo mínimo, y comprobar el resultado con estilos calculados reales del navegador.

La página de partida

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

pagina.html

<article class="nota">
  <h1>Mi primera tarjeta</h1>
  <p>Texto del <strong>párrafo</strong> principal.</p>
  <p class="aviso">Este es un aviso importante.</p>
  <a href="#">Un enlace</a>
</article>

✏️ Prueba tu CSS aquí (opcional)

Código (edítalo)

<style>
  /* escribe tu CSS */
</style>
<article class="nota">
  <h1>Mi primera tarjeta</h1>
  <p>Texto del <strong>párrafo</strong> principal.</p>
  <p class="aviso">Este es un aviso importante.</p>
  <a href="#">Un enlace</a>
</article>

Resultado

Pasos

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

En tu caja de pruebas, escribe una regla para h1 que lo pinte de #4f46e5.
Escribe una regla para article con color: #1e2235, font-family: Georgia, serif y font-size: 18px.
Haz que el <a> tenga color: #be123c (debe ganar al estilo del artículo).
Haz que los párrafos tengan line-height: 1.7.
Haz que .aviso tenga un fondo #fff3cd y color de texto #664d03.
Añade * { box-sizing: border-box; } y body { margin: 0; }.
Comprueba, con el comprobador de abajo, que todo se cumple.

💡 Pista 1: mi `a` no cambia de color

Los enlaces tienen su propio color por defecto del navegador: no heredan el color del artículo. Escribe una regla directa a { color: … } o article a { … }.

💡 Pista 2: mi párrafo `.aviso` se ve del mismo color que los demás

Escribe la regla de .aviso después de la de p, o usa un selector más específico como p.aviso.

🔎 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

* { box-sizing: border-box; }
body { margin: 0; }

h1 { color: #4f46e5; }

article {
  color: #1e2235;
  font-family: Georgia, serif;
  font-size: 18px;
}

p { line-height: 1.7; }

a { color: #be123c; }

.aviso {
  background: #fff3cd;
  color: #664d03;
}

💡 🏁 Reto extra (opcional)

Cambia la última regla p { … } para que quede antes de .aviso y luego después. ¿Qué cambia? Explica con tus palabras por qué, usando la cascada.