CSS Latte Art: Module 5

← Dashboard
Module 5: Reusable Ingredients

Variables & Architecture

Use CSS variables (custom properties) for a global theme. Organize code logically and understand inheritance — styles flow from parent to child.

/* :root = global variables */
:root {
  --coffee-dark: #2c1810;
  --coffee-light: #f5f1ed;
  --accent: #d4a373;
}

/* Use them anywhere */
.btn {
  background: var(--accent);
  color: var(--coffee-dark);
}

/* Override per component */
.card { --accent: #059669; }

Theme Variables in Action

Uses --accent
Uses --coffee-dark
Pro Tip

Change one variable in :root to update the whole site — instant theme switch!

Inheritance

font, color, line-height inherit. margin, padding, border do not.