This is a searchable CSS properties reference covering the properties you use most often, each with a plain-English description. It is grouped into the box model, layout and positioning, flexbox, grid, typography, colour and transitions — so you can quickly recall what a property does or discover the right one for a task without digging through full documentation.
How it works
The properties are organised into logical groups. The box model group covers margin, padding, border, box-sizing, width and overflow. Layout and positioning covers display and position, while dedicated groups list the flexbox and grid properties. Typography covers font-size, line-height and friends, alongside colour and transition properties. Type a property name or a word from its description into the search box and the list filters instantly to matching entries.
Property groups at a glance
| Group | Key properties |
|---|---|
| Box model | margin, padding, border, box-sizing, width, height, overflow |
| Layout | display, position, top/right/bottom/left, z-index, float |
| Flexbox | flex-direction, justify-content, align-items, flex, gap |
| Grid | grid-template-columns, grid-area, grid-column, minmax() |
| Typography | font-size, font-weight, line-height, letter-spacing, text-align |
| Colour | color, background-color, background, opacity |
| Transitions | transition, animation, transform |
Commonly confused pairs
margin vs padding: Margin is space outside the border — it separates the element from its neighbours and can collapse with adjacent margins. Padding is space inside the border — it separates content from the border edge and does not collapse. Adding background-color makes the difference visible: the background fills the padding area but not the margin.
width vs max-width: width sets a fixed size; max-width sets a ceiling and lets the element be smaller if its container or content is narrower. For responsive text blocks, max-width: 65ch caps the reading width while width: 100% would force full-width on narrow screens.
position: relative vs position: absolute: relative offsets an element from its normal position but keeps its space in the document flow. absolute removes the element from flow entirely and positions it relative to the nearest ancestor with position other than static. A missing positioned ancestor causes absolute elements to jump to the viewport edge.
display: none vs visibility: hidden: display: none removes the element from layout entirely — no space is reserved. visibility: hidden hides the element but keeps its space, so the surrounding layout does not shift.
transition vs animation: transition responds to state changes (hover, focus, class toggle) and runs between a start and end state. animation uses @keyframes for multi-step effects that can loop, run on load, or repeat independently of state changes.
Searching effectively
Search by property name (flex-wrap), a partial name (wrap), or by what you want
to achieve (center, spacing, shadow). The descriptions use plain language so
intent-based searches surface the right property.
Everything runs in your browser; nothing is uploaded.