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 Typography
Font stacks, sizing, spacing, alignment, decoration, and variable fonts. MDN Reference
1. font-family & font stacks
Serif — Georgia, Times New Roman
Sans-serif — Helvetica Neue, Arial
Monospace — Courier New
Cursive — generic
system-ui — OS default
/* Fallback chain: first available font wins */
font-family: Georgia, 'Times New Roman', serif;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-family: 'Courier New', Courier, monospace;
/* Modern OS font */
font-family: system-ui, -apple-system,
BlinkMacSystemFont, sans-serif;
/* Web font via @font-face */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
}2. font-size & units
0.75rem — small label
1rem — body base
1.25rem — lead text
1.5rem — h5 equivalent
2rem — h3 equivalent
clamp(1rem, 2.5vw, 2rem) — fluid
font-size: 16px; /* absolute */
font-size: 1rem; /* relative to root */
font-size: 1.25em; /* relative to parent */
font-size: 5vw; /* viewport width */
/* Fluid sizing — min, preferred, max */
font-size: clamp(1rem, 2.5vw, 2rem);3. font-weight & font-style
font-weight: 100 — Thin
font-weight: 300 — Light
font-weight: 400 — Normal
font-weight: 600 — SemiBold
font-weight: 700 — Bold
font-weight: 900 — Black
font-style: italic
font-weight: 100; /* Thin */
font-weight: 400; /* Normal */
font-weight: 700; /* Bold */
font-weight: 900; /* Black */
font-style: italic;
font-style: oblique 15deg;
/* Shorthand */
font: italic 700 1.25rem/1.5 system-ui;4. line-height & letter-spacing
line-height: 1 — tight. The quick brown fox jumps over the lazy dog.
line-height: 1.5 — comfortable. The quick brown fox jumps over the lazy dog.
line-height: 2 — loose. The quick brown fox jumps over the lazy dog.
letter-spacing: 0.2em — SPACED CAPS
line-height: 1; /* tight */
line-height: 1.5; /* comfortable (default) */
line-height: 2; /* double-spaced */
line-height: 1.8rem; /* fixed */
letter-spacing: 0.05em; /* tracking */
letter-spacing: -0.02em; /* tight tracking */
word-spacing: 0.1em;5. Text alignment
text-align: left
text-align: center
text-align: right
text-align: justify — spreads text to fill the full line width evenly.
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
text-align: start; /* logical — RTL aware */
text-align: end;6. Text decoration & transform
text-decoration: underline
text-decoration: line-through
underline wavy #ec4899
underline dotted
text-transform: uppercase
text-transform: capitalize
text-transform: LOWERCASE
text-decoration: underline;
text-decoration: line-through;
text-decoration: underline wavy hotpink;
text-decoration: underline dotted;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-indent: 2em; /* first-line indent */7. Overflow & truncation
Single-line truncation — this text is longer than the container so it gets clipped with an ellipsis.
Multi-line clamp (3 lines) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit urna ut lorem gravida, nec tincidunt odio eleifend. Proin sed libero nec libero ornare vestibulum.
/* Single-line ellipsis */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Multi-line clamp */
.clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}