Code
CSS
Colors
Color formats, opacity, gradients, and CSS custom properties.
Typography
Font stacks, sizing, weight, line-height, spacing, and truncation.
Sizing
Width, height, min/max, units, aspect-ratio, and clamp().
Box Model
Content, padding, border, margin, box-sizing, and margin collapse.
Flexbox
One-dimensional layout — direction, alignment, wrap, grow/shrink.
Grid
Two-dimensional layout — columns, rows, areas, auto-fill, and dense.
Responsive Design
Media queries, mobile-first, container queries, and fluid techniques.
Animation
@keyframes, timing functions, fill-mode, staggered sequences and more.
Generative Art with CSS
Pure CSS as a generative-art engine — layered gradients, blend modes, keyframe motion, and noise.
CSS Box Model
Every element is a box — content, padding, border, margin. MDN Reference
1. The box model
.box {
/* content area */
width: 200px;
height: 100px;
/* space inside border */
padding: 16px;
padding: 8px 16px; /* top/bottom left/right */
padding: 4px 8px 12px 16px; /* T R B L */
/* decorative edge */
border: 2px solid #6366f1;
border-radius: 8px;
/* space outside border */
margin: 24px;
margin: 0 auto; /* horizontal center */
margin-block: 1rem; /* logical */
}2. box-sizing
content-box (default) adds padding and border outside the declared width. border-box includes them inside — almost always what you want.
content-box (default) — total = 200 + 32 + 4 = 236px
border-box — total stays 200px
/* Grows beyond declared width */
.content-box {
box-sizing: content-box; /* default */
width: 200px;
padding: 16px;
border: 2px solid;
/* actual rendered width = 236px */
}
/* Stays at declared width */
.border-box {
box-sizing: border-box;
width: 200px;
padding: 16px;
border: 2px solid;
/* actual rendered width = 200px */
}
/* Global best-practice reset */
*, *::before, *::after {
box-sizing: border-box;
}3. margin
/* Shorthand */
margin: 8px; /* all sides */
margin: 8px 16px; /* top/bottom, left/right */
margin: 8px 16px 4px 12px; /* T R B L */
/* Individual sides */
margin-top: 8px;
margin-right: 16px;
margin-bottom: 8px;
margin-left: 16px;
/* Logical properties */
margin-block: 8px; /* top & bottom */
margin-inline: auto; /* horizontal center */
/* Negative margins */
margin-top: -8px;4. padding
padding: 4px 8px; /* top/bottom, left/right */
padding: 12px 24px;
padding: 24px;
/* Individual sides */
padding-top: 12px;
padding-right: 24px;
padding-bottom: 12px;
padding-left: 24px;
/* Logical */
padding-block: 12px;
padding-inline: 24px;5. border & border-radius
/* Shorthand: width style color */
border: 2px solid #6366f1;
border: 3px dashed hotpink;
border: 4px dotted steelblue;
border: 4px double #22c55e;
/* Individual sides */
border-top: 2px solid;
border-bottom: none;
/* Radius */
border-radius: 8px;
border-radius: 50%; /* circle */
border-radius: 1rem 0 1rem 0; /* diagonal */
border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
/* Outline — outside the border, no layout shift */
outline: 3px solid #f59e0b;
outline-offset: 4px;6. Margin collapse
Adjacent vertical margins of block elements collapse — only the larger margin applies. This does not happen inside flex or grid containers.
/* Margins collapse — gap = max(24, 16) = 24px */
.first { margin-bottom: 24px; }
.second { margin-top: 16px; }
/* Prevent collapse with overflow or padding */
.parent {
overflow: hidden; /* or */
padding-top: 1px;
}
/* Or use flex / grid (no collapse) */
.stack {
display: flex;
flex-direction: column;
gap: 1rem;
}