Reto css — Playground Vivir de IA

Reconoce

Pregunta 1 de 5

h1 {
  color: #DC2626;
}

¿Qué propiedad cambia el color del texto?

1

Domina el Box Model

Ajusta width, padding, margin y border hasta que tu card coincida con el objetivo

Pendiente

Modifica las propiedades CSS de .card para que tu tarjeta se vea igual que el objetivo de la derecha. Necesitas ajustar width, padding, margin y border.

Tu CSS

.card {
  width: 100px;
  padding: 4px;
  margin: 0;
  border: none;
  border-radius: 0;
  font-family: system-ui, sans-serif;
}
h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px 0; }
p { font-size: 14px; color: #71717A; margin: 0; }

Objetivo

Tu resultado

2

Selectores CSS

Escribe los selectores correctos para aplicar estilos a cada elemento

Pendiente

Dado el HTML de la derecha, escribe los selectores CSS correctos para que cada elemento tenga el estilo indicado en los comentarios. Usa selectores de ID (#), clase (.) y compuestos (.a.b).

Pista: para seleccionar un elemento con dos clases, únelas sin espacio: .clase1.clase2

Tu CSS

/* Escribe los selectores correctos */

/* 1. El título (id="titulo") debe ser azul #1E40AF */


/* 2. El párrafo con class="intro" debe ser gris #6B7280 e itálica */


/* 3. El item con class="destacado" debe ser rojo #DC2626 y negrita */


/* 4. El botón con ambas clases "btn" y "primary" debe tener fondo #101010 y texto blanco */

Objetivo

3

Centra el div

El clásico reto: centra la caja negra horizontal y verticalmente dentro del contenedor

Pendiente

Añade las propiedades CSS necesarias al .contenedor para centrar la .caja tanto horizontal como verticalmente. La solución más sencilla usa flexbox.

Pista: necesitas tres propiedades en .contenedor: display, justify-content y align-items.

Tu CSS

.contenedor {
  width: 100%;
  height: 300px;
  background: #F4F4F5;
  border-radius: 12px;
}
.caja {
  width: 120px;
  height: 120px;
  background: #101010;
  color: #FFFFFF;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

Objetivo

Recursos

Documentación y material de apoyo para este reto

Documentación oficial

MDN CSS

Cheatsheet visual

CSS-Tricks Almanac

Estado del reto