Reference

🎨 CSS Cheat Sheet

The paint of the house. Print me out!

The pattern

selector {            /* WHO gets painted        */
  property: value;    /* WHAT about them: choice */
}

Rules live inside a <style> tag in the <head>. Every rule needs its { } braces, and every line ends with ;

Selectors — WHO

Selector	Picks	Example
`h1`	Every element of that tag	`h1 { color: purple; }`
`.card`	Everything with `class="card"`	`.card { padding: 16px; }`
`#buy`	The ONE element with `id="buy"`	`#buy { background: gold; }`

Properties — WHAT

Property	Changes	Example value
`color`	Text color	`tomato`, `#222`
`background-color`	Fill color of the box	`gold`, `lavender`
`font-family`	The letter style	`sans-serif`
`font-size`	Letter size	`20px`
`text-align`	Text position	`center`
`padding`	Space INSIDE the box edge	`16px`
`margin`	Space OUTSIDE the box	`24px`
`border`	The frame around the box	`3px solid purple`
`border-radius`	Round corners	`12px`, `50%`=circle

The box model 📦

┌─ margin ──────────────────────┐   space to OTHER boxes
│  ┌─ border ────────────────┐  │   the frame
│  │  ┌─ padding ─────────┐  │  │   space inside the frame
│  │  │     content       │  │  │   your text / picture
│  │  └───────────────────┘  │  │
│  └─────────────────────────┘  │
└───────────────────────────────┘

Flexbox — the train 🚂

.row {                      /* the PARENT is the track   */
  display: flex;            /* kids line up in a row     */
  gap: 16px;                /* space between train cars  */
  justify-content: center;  /* where the train sits      */
  align-items: center;      /* line up tops and bottoms  */
}

Remember: display: flex goes on the parent, and it moves the children.

Sneaky facts

CSS never shows errors. Misspell colr and it is silently ignored — check spelling first when styling "does nothing".
A missing } kills every rule that comes after it.
If .card styles nothing, check the HTML really says class="card" — letter for letter.