Colors, text and the box model

Color and text

.card {
  color: #1f2937;            /* text color */
  background: #fde047;       /* background color */
  font-size: 18px;
  text-align: center;
}

The box model

Think of each element as a wrapped gift: the content sits inside, the wrapping paper hugs it, the ribbon outlines it, and you leave a gap before the next gift. Those are the four layers of the box, from inside out:

1. content: the content.
2. padding: inner space (between the content and the border).
3. border: the border.
4. margin: outer space (separates it from other boxes).

.box {
  padding: 16px;             /* inner padding */
  border: 2px solid #333;    /* border */
  margin: 8px;               /* outer spacing */
}

⚠️ Classic gotcha: mixing up padding (pushes inward, from the border) with margin (pushes outward, against the neighbors). Understanding the box model is the foundation of all design in CSS; when something won't fit, it's almost always this.