A reference for the most common CSS properties. Use it as a quick lookup while building UIs.
| Property | Description | Example | Possible Values |
|---|---|---|---|
color |
Text color | color: #1a1a1a; |
named, hex, rgb(), rgba(), hsl(), hsla(), currentColor |
background-color |
Background fill color | background-color: #f5f5f5; |
same as color |
background-image |
Image or gradient background | background-image: url('bg.jpg'); |
url(...), linear-gradient(...), radial-gradient(...), none |
background-size |
How the bg image is sized | background-size: cover; |
auto, cover, contain, <length>, <percentage> |
background-position |
Anchor of the bg image | background-position: center; |
top, right, bottom, left, center, <length>, <percentage> |
background-repeat |
Whether bg image tiles | background-repeat: no-repeat; |
repeat, no-repeat, repeat-x, repeat-y, space, round |
background |
Shorthand | background: #fff url('a.png') center/cover no-repeat; |
combination of the above |
opacity |
Transparency of the whole element | opacity: 0.8; |
0 to 1 |
| Property | Description | Example | Possible Values |
|---|---|---|---|
font-family |
Typeface stack | font-family: 'Inter', sans-serif; |
font names, generic families (serif, sans-serif, monospace, system-ui) |
font-size |
Text size | font-size: 1rem; |
<length>, <percentage>, small, medium, large, etc. |
font-weight |
Boldness | font-weight: 600; |
100–900, normal, bold, lighter, bolder |
font-style |
Italic vs normal | font-style: italic; |
normal, italic, oblique |
line-height |
Vertical spacing between lines | line-height: 1.5; |
unitless number (preferred), <length>, <percentage>, normal |
letter-spacing |
Tracking | letter-spacing: 0.05em; |
<length>, normal |
text-align |
Horizontal alignment | text-align: center; |
left, right, center, justify, start, end |
text-decoration |
Underline / strikethrough | text-decoration: underline; |
none, underline, line-through, overline |
text-transform |
Case transform | text-transform: uppercase; |
none, uppercase, lowercase, capitalize |
white-space |
How whitespace/wrapping is handled | white-space: nowrap; |
normal, nowrap, pre, pre-wrap, pre-line |
word-break |
How long words break | word-break: break-word; |
normal, break-all, keep-all, break-word |
| Property | Description | Example | Possible Values |
|---|---|---|---|
width / height |
Element dimensions | width: 320px; |
<length>, <percentage>, auto, min-content, max-content, fit-content |
min-width / min-height |
Lower bound | min-height: 100vh; |
same as width |
max-width / max-height |
Upper bound | max-width: 1200px; |
same as width |
padding |
Inner spacing | padding: 16px 24px; |
<length>, <percentage> (1–4 values: top right bottom left) |
margin |
Outer spacing | margin: 0 auto; |
<length>, <percentage>, auto |
border |
Border shorthand | border: 1px solid #ddd; |
<width> <style> <color> |
border-radius |
Rounded corners | border-radius: 8px; |
<length>, <percentage> |
box-sizing |
How width/height are calculated | box-sizing: border-box; |
content-box, border-box |
box-shadow |
Drop shadow | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
<x> <y> <blur> <spread> <color>, inset, none |
outline |
Border that doesn't take space (focus rings) | outline: 2px solid blue; |
same as border |
Tip: most projects set
*, *::before, *::after { box-sizing: border-box; }globally.
| Unit | Meaning | When to use |
|---|---|---|
px |
Absolute pixels | Borders, fixed UI details |
rem |
Relative to root font-size | Font sizes, spacing — preferred for accessibility |
em |
Relative to parent font-size | Spacing tied to local text size |
% |
Relative to parent | Widths within containers |
vw / vh |
1% of viewport width/height | Full-screen sections, hero areas |
vmin / vmax |
1% of smaller/larger viewport side | Responsive square layouts |
ch |
Width of "0" character | Text column widths (e.g. max-width: 65ch) |
fr |
Fraction of free space (Grid only) | Grid track sizing |
| Property | Description | Example | Possible Values |
|---|---|---|---|
display |
Layout mode of the element | display: flex; |
block, inline, inline-block, flex, grid, inline-flex, inline-grid, none, contents |
visibility |
Show/hide while keeping space | visibility: hidden; |
visible, hidden, collapse |
overflow |
Behavior when content overflows | overflow: auto; |
visible, hidden, scroll, auto, clip |
overflow-x / overflow-y |
Per-axis overflow | overflow-x: hidden; |
same as overflow |
cursor |
Mouse cursor | cursor: pointer; |
auto, pointer, default, text, not-allowed, grab, wait, etc. |
| Property | Description | Example | Possible Values |
|---|---|---|---|
position |
Positioning scheme | position: absolute; |
static, relative, absolute, fixed, sticky |
top / right / bottom / left |
Offsets (when positioned) | top: 0; |
<length>, <percentage>, auto |
z-index |
Stacking order | z-index: 10; |
integer, auto |
inset |
Shorthand for top/right/bottom/left | inset: 0; |
same values, 1–4 |
Apply to the container with display: flex;.