The Plumage 🎨

Mastering CSS, Colors, and Layouts


1. The Palette (CSS Variables)

Consistent design uses a strict color palette. In CSS, we define these as :root variables so we can change the theme easily.

Canopy
Leaf
Fern
Bark
Parrot
Sun

2. The Box Model

Every element in HTML is a rectangular box. CSS determines the size of the layers around it. Understanding this is the key to layout.

Interactive Visualization:
MARGIN (Yellow)
BORDER (Red)
PADDING (Green)
CONTENT (White)
This is the actual text/image.

3. Flexbox Layout

CSS Flexbox allows us to align items efficiently. Think of it like leaves on a branch. The example below uses display: flex and justify-content: space-between.

1
2
3
4
5

Resize your browser window! Because this uses flexbox, the leaves will automatically adjust their spacing to fit the branch.