Cores, texto e o modelo de caixa

Cor e texto

.cartao {
  color: #1f2937;            /* cor do texto */
  background: #fde047;       /* cor de fundo */
  font-size: 18px;
  text-align: center;
}

O modelo de caixa

Pense em cada elemento como um presente embrulhado: o conteúdo fica dentro, o papel o envolve, a fita o contorna e você deixa um espaço até o próximo presente. Essas são as quatro camadas da caixa, de dentro para fora:

1. content: o conteúdo.
2. padding: espaço interno (entre o conteúdo e a borda).
3. border: a borda.
4. margin: espaço externo (separa de outras caixas).

.caixa {
  padding: 16px;             /* preenchimento interno */
  border: 2px solid #333;    /* borda */
  margin: 8px;               /* espaçamento externo */
}

⚠️ Pegadinha clássica: confundir padding (empurra para dentro, a partir da borda) com margin (empurra para fora, contra os vizinhos). Entender o modelo de caixa é a base de todo o design em CSS; quando algo não encaixa, quase sempre é isso.