Colores, texto y el modelo de caja

Color y texto

.tarjeta {
  color: #1f2937;            /* color del texto */
  background: #fde047;       /* color de fondo */
  font-size: 18px;
  text-align: center;
}

El modelo de caja

Piensa en cada elemento como un regalo envuelto: el contenido va dentro, el papel lo rodea, la cinta lo bordea y dejas un hueco hasta el siguiente regalo. Esas son las cuatro capas de la caja, de dentro a fuera:

1. content: el contenido.
2. padding: espacio interior (entre el contenido y el borde).
3. border: el borde.
4. margin: espacio exterior (separa de otras cajas).

.caja {
  padding: 16px;             /* relleno interior */
  border: 2px solid #333;    /* borde */
  margin: 8px;               /* separación exterior */
}

⚠️ Trampa clásica: confundir padding (empuja hacia dentro, desde el borde) con margin (empuja hacia fuera, contra los vecinos). Entender el modelo de caja es la base de todo el diseño en CSS; cuando algo no encaja, casi siempre es esto.