CSS Property Reference
The complete list of practical CSS properties, grouped by job. Bookmark this page!
Text
| Property | What it sets | Example |
|---|
color | Text color | color: red; |
font-family | Typeface | font-family: Arial; |
font-size | Text size | font-size: 16px; |
font-weight | Boldness | font-weight: bold; |
font-style | Italic or normal | font-style: italic; |
font-variant | Small caps | font-variant: small-caps; |
line-height | Space between lines | line-height: 1.5; |
letter-spacing | Space between letters | letter-spacing: 1px; |
word-spacing | Space between words | word-spacing: 4px; |
text-align | Left/right/center/justify | text-align: center; |
text-decoration | Underline etc. | text-decoration: none; |
text-transform | Upper/lower/capitalize | text-transform: uppercase; |
text-shadow | Shadow on text | text-shadow: 1px 1px 2px; |
white-space | How spaces/newlines behave | white-space: nowrap; |
text-overflow | Ellipsis on overflow | text-overflow: ellipsis; |
font | Shorthand for font props | font: 16px Arial, sans-serif; |
Background
| Property | What it sets | Example |
|---|
background-color | Solid background color | background-color: #fff; |
background-image | Background picture | background-image: url(img.png); |
background-repeat | Tiling behavior | background-repeat: no-repeat; |
background-position | Image position | background-position: center; |
background-size | Image size / cover | background-size: cover; |
background-attachment | Scrolls or fixed | background-attachment: fixed; |
background | Shorthand | background: #fff url(x) no-repeat; |
Box
| Property | What it sets | Example |
|---|
width | Content width | width: 200px; |
height | Content height | height: 100px; |
max-width | Width cap | max-width: 600px; |
min-width | Width floor | min-width: 150px; |
padding | Inside spacing | padding: 10px; |
margin | Outside spacing | margin: 0 auto; |
border | Frame | border: 1px solid black; |
border-radius | Rounded corners | border-radius: 8px; |
outline | Focus ring-ish border | outline: 3px solid blue; |
box-shadow | Drop shadow | box-shadow: 0 2px 6px rgba(0,0,0,.3); |
box-sizing | border-box or content-box | box-sizing: border-box; |
overflow | Clip/scroll content | overflow: auto; |
opacity | Whole-element transparency | opacity: 0.5; |
Layout
| Property | What it sets | Example |
|---|
display | block/inline/flex/grid/none | display: flex; |
position | static/relative/absolute... | position: relative; |
top/right/bottom/left | Offsets | top: 20px; |
z-index | Stacking order | z-index: 10; |
float | Floats an element | float: left; |
clear | Stops float adjacency | clear: both; |
visibility | Hidden keeps space | visibility: hidden; |
Flexbox
| Property | What it sets | Example |
|---|
flex-direction | Row or column | flex-direction: column; |
flex-wrap | Allow wrapping | flex-wrap: wrap; |
justify-content | Main-axis alignment | justify-content: center; |
align-items | Cross-axis alignment | align-items: center; |
align-content | Multi-line distribution | align-content: space-between; |
flex | Grow/shrink/basis shorthand | flex: 1; |
align-self | Item-level align | align-self: flex-end; |
order | Visual order of items | order: 2; |
Grid
| Property | What it sets | Example |
|---|
grid-template-columns | Column tracks | grid-template-columns: 1fr 1fr; |
grid-template-rows | Row tracks | grid-template-rows: auto 100px; |
grid-template-areas | Named areas | grid-template-areas: "header header"; |
grid-column | Column placement | grid-column: 1 / 3; |
grid-row | Row placement | grid-row: span 2; |
gap | Track spacing | gap: 12px; |
justify-items | Inline (horizontal) alignment | justify-items: center; |
align-items | Block (vertical) alignment | align-items: start; |
Effects & animation
| Property | What it sets | Example |
|---|
transform | Rotate/scale/translate | transform: rotate(45deg); |
transform-origin | Pivot point | transform-origin: left; |
transition | Smooth state changes | transition: all .3s ease; |
animation | Keyframe animations | animation: spin 2s infinite; |
filter | Image/UI effects | filter: blur(4px); |
text-shadow | Text depth | text-shadow: 1px 1px hotpink; |
box-shadow | Box depth | box-shadow: 0 4px 8px black; |
cursor | Pointer style | cursor: pointer; |
clip-path | Visually clip the box | clip-path: circle(50%); |
object-fit | How img/video fills box | object-fit: cover; |
Interactivity & misc
| Property | What it sets | Example |
|---|
cursor | Mouse cursor shape | cursor: grab; |
pointer-events | Accept clicks? | pointer-events: none; |
user-select | Allow text selection | user-select: none; |
resize | Allow user resizing | resize: both; |
accent-color | Checkbox/radio accent | accent-color: #04aa6d; |
scroll-behavior | Smooth scroll jump | scroll-behavior: smooth; |
Shared shorthands to remember
margin: top right bottom left;padding: top right bottom left;border: width style color;font: style variant weight size/line-height family;flex: grow shrink basis;animation: name duration timing delay iteration direction fill;
TL;DR
- This is your CSS dictionary: text, box, layout, grid, flex, effects.
- Remember the shorthand orders, they come up daily.
- Bookmark this page for any property you forget.