CSS Latte Art: Module 1

← Dashboard
Module 1: The Flavor Profile

Core Styling

Master colors (HEX, RGB, HSL), typography with Google Fonts, and the box model — padding, margins, and borders.

/* Colors */
color: #6f4e37;        /* HEX */
color: rgb(111, 78, 55);
color: hsl(25, 34%, 33%);

/* Box Model */
padding: 16px;
margin: 0 auto;
border: 2px solid #d4a373;

/* Typography */
font-family: 'Inter', sans-serif;
line-height: 1.6;
letter-spacing: 0.05em;

The Box Model

content + padding
with margin
Pro Tip

Use box-sizing: border-box so width includes padding and border.

HSL

HSL (Hue, Saturation, Lightness) makes it easy to create color variations.