Complete CSS reference covering selectors, the box model, Flexbox, Grid, typography, colors, transitions, animations, and media queries. Everything you need to style modern, responsive websites.
| Code / Syntax | Description |
|---|---|
* | Universal selector — matches everything |
element | Type selector (e.g. div, p, a) |
.class | Class selector |
#id | ID selector |
A B | Descendant combinator (B inside A) |
A > B | Child combinator (direct child only) |
A + B | Adjacent sibling (B immediately after A) |
A ~ B | General sibling (B after A, same parent) |
:hover | Mouse over state |
:focus | Element has keyboard focus |
:first-child | First child of its parent |
:nth-child(2n) | Every even child element |
::before / ::after | Pseudo-elements for generated content |
[attr="value"] | Attribute selector |
| Code / Syntax | Description |
|---|---|
width / height | Set element dimensions |
max-width / min-width | Constrain element width |
padding: 10px 20px | Inner spacing (top/bottom left/right) |
margin: 0 auto | Center block element horizontally |
border: 1px solid #ccc | Border shorthand (width style color) |
border-radius: 8px | Rounded corners |
box-sizing: border-box | Include padding/border in width/height |
overflow: hidden | Hide content that overflows |
overflow: auto | Scroll when content overflows |
outline: 2px solid blue | Outline (does not affect layout) |
| Code / Syntax | Description |
|---|---|
display: flex | Enable Flexbox on container |
flex-direction: row | column | Main axis direction |
justify-content: center | Align items along main axis |
align-items: center | Align items along cross axis |
flex-wrap: wrap | Allow items to wrap to next line |
gap: 16px | Spacing between flex items |
flex: 1 | Item grows to fill available space |
flex-shrink: 0 | Prevent item from shrinking |
align-self: flex-end | Override alignment for one item |
order: -1 | Change visual order of a flex item |
| Code / Syntax | Description |
|---|---|
display: grid | Enable CSS Grid on container |
grid-template-columns: 1fr 1fr 1fr | Three equal columns |
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) | Responsive auto-fit columns |
grid-template-rows: auto 1fr auto | Define row sizes |
gap: 20px | Spacing between grid cells |
grid-column: 1 / 3 | Span item across columns 1-2 |
grid-row: 1 / 3 | Span item across rows 1-2 |
place-items: center | Center items in both axes |
grid-template-areas: "header header" "sidebar main" | Named grid areas |
grid-area: header | Assign item to a named area |
| Code / Syntax | Description |
|---|---|
font-family: system-ui, sans-serif | System font stack |
font-size: 1rem | Font size relative to root |
font-weight: 700 | Bold weight (100–900) |
line-height: 1.5 | Line spacing (unitless recommended) |
letter-spacing: 0.05em | Spacing between characters |
text-align: center | Center text horizontally |
text-decoration: underline | Underline text |
text-transform: uppercase | Transform text to uppercase |
white-space: nowrap | Prevent text wrapping |
text-overflow: ellipsis | Show … for overflowing text (with overflow: hidden) |
| Code / Syntax | Description |
|---|---|
color: #333 | Text color (hex) |
color: rgb(51, 51, 51) | Text color (RGB) |
color: hsl(220, 50%, 50%) | Text color (HSL) |
opacity: 0.5 | Element transparency (0–1) |
background-color: #f5f5f5 | Solid background color |
background: linear-gradient(to right, #667eea, #764ba2) | Linear gradient background |
background-image: url('img.jpg') | Background image |
background-size: cover | Scale image to cover element |
background-position: center | Center background image |
background-repeat: no-repeat | Do not tile background image |
| Code / Syntax | Description |
|---|---|
transition: all 0.3s ease | Animate all property changes |
transition: transform 0.2s ease-in-out | Animate specific property |
transform: translateX(100px) | Move element horizontally |
transform: scale(1.1) | Scale element up by 10% |
transform: rotate(45deg) | Rotate element 45 degrees |
@keyframes name { from { } to { } } | Define a keyframe animation |
animation: name 1s ease infinite | Apply a keyframe animation |
animation-delay: 0.5s | Delay before animation starts |
will-change: transform | Hint browser to optimize for changes |
| Code / Syntax | Description |
|---|---|
@media (max-width: 768px) { } | Styles for screens up to 768px |
@media (min-width: 1024px) { } | Styles for screens 1024px and wider |
@media (prefers-color-scheme: dark) { } | Dark mode styles |
@media (prefers-reduced-motion: reduce) { } | Reduced motion preference |
@media print { } | Print-specific styles |
@media (hover: hover) { } | Devices that support hover |
@media (orientation: landscape) { } | Landscape orientation |
@media (min-width: 640px) and (max-width: 1023px) { } | Tablet range |
Found this cheat sheet useful? Check out our other references and tools.