Selectors
| Selector | Syntax | Selects | Specificity |
|---|---|---|---|
| Universal | * { } |
Every element | 0-0-0 |
| Element | p { } |
All <p> tags |
0-0-1 |
| Class preferred | .card { } |
All class="card" |
0-1-0 |
| ID avoid for CSS | #hero { } |
The one id="hero" |
1-0-0 |
| Descendant | nav a { } |
<a> inside <nav> |
sum of parts |
| Multiple | h1, h2 { } |
Both <h1> and <h2> |
each independently |
| Chained | .card.featured { } |
Elements with both classes | 0-2-0 |
Box Model
| Layer | Property | What It Does |
|---|---|---|
| Content | width, height |
Size of the content area |
| Padding | padding |
Space inside the border (background fills it) |
| Border | border |
Visible line: width style color |
| Margin | margin |
Space outside the border (transparent) |
Shorthand Patterns
padding: 1rem; → all 4 sides
padding: 1rem 2rem; → top/bottom, left/right
padding: 1rem 2rem 0.5rem; → top, left/right, bottom
padding: 1rem 2rem 0.5rem 0; → top, right, bottom, left (clockwise)
Units
| Unit | Type | Use For |
|---|---|---|
px |
Absolute | Borders, shadows, tiny details |
rem go-to |
Relative (root font) | Font sizes, spacing, padding, margins |
em |
Relative (parent font) | Internal component spacing |
% |
Relative (parent size) | Widths, responsive layouts |
vh / vw |
Viewport-relative | Full-screen sections, hero areas |
ch |
Character width | Paragraph max-width (65ch is ideal) |
1rem = 16px (default). So 1.5rem = 24px, 2rem = 32px, 0.5rem = 8px.
Color Formats
| Format | Example | Notes |
|---|---|---|
| Named | red |
Quick prototyping only |
| Hex | #8b5cf6 |
Most common in production |
| RGB | rgb(139, 92, 246) |
Good for computed colors |
| RGBA | rgba(139, 92, 246, 0.5) |
When you need transparency |
| HSL intuitive | hsl(262, 90%, 66%) |
Best for building palettes |
Typography Properties
| Property | Example | Notes |
|---|---|---|
font-family |
'Inter', sans-serif |
Always include a fallback |
font-size |
1rem (body), 2.5rem (h1) |
Use rem for accessibility |
font-weight |
400 / 600 / 700 |
400=regular, 600=semi-bold, 700=bold |
line-height |
1.6 (body), 1.1 (headings) |
Unitless numbers are preferred |
letter-spacing |
-0.02em (large text) |
Tighten large headings, loosen small caps |
text-align |
left / center / right |
Left is default for Latin text |
text-decoration |
none / underline |
Use to remove link underlines |
text-transform |
uppercase / capitalize |
Visual only — doesn't change HTML |
Essential Reset
Always start with this
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #1d1d1f;
background-color: #fbfbfb;
-webkit-font-smoothing: antialiased;
}Specificity Scoring
When two rules conflict, compare their specificity scores:
- Element (p, h1, div) → 0-0-1
- Class (.card, .active) → 0-1-0
- ID (#hero) → 1-0-0
- Inline style → trumps all (avoid)
- !important → nuclear option (never use)
Equal specificity? Last rule in the file wins.
Sources: MDN: CSS Reference · MDN: Specificity · MDN: Box Model