.class Class selector
#id ID selector
element Type/tag selector
parent > child Direct child combinator
ancestor descendant Descendant combinator
el + sibling Adjacent sibling combinator
el ~ siblings General sibling combinator
[attr="value"] Attribute selector (exact match)
:hover / :focus / :active Interactive pseudo-classes
:first-child / :last-child First/last child pseudo-class
:nth-child(2n) Every even child
::before / ::after Pseudo-elements (generated content)
:not(.class) Negation pseudo-class
:has(.child) Parent selector (contains child)
:is(h1, h2, h3) Matches any in list
display: block | inline | inline-block | none Display mode
position: static | relative | absolute | fixed | sticky Positioning scheme
top / right / bottom / left Offset for positioned elements
z-index: 10 Stack order (higher = on top)
overflow: hidden | scroll | auto Handle overflowing content
box-sizing: border-box Include padding/border in size
margin: 0 auto Center block element horizontally
width / height / min-width / max-width Size constraints
float: left | right | none Float element (legacy layout)
display: flex Enable flexbox on container
flex-direction: row | column Main axis direction
justify-content: center | space-between | space-around Align items along main axis
align-items: center | stretch | flex-start | flex-end Align items along cross axis
flex-wrap: wrap Allow items to wrap to next line
gap: 1rem Space between flex/grid items
flex: 1 Flex grow (fill available space)
flex: 0 0 200px Fixed width flex item (no grow/shrink)
align-self: center Override align-items for one item
order: -1 Change visual order of item
display: grid Enable CSS Grid on container
grid-template-columns: 1fr 2fr 1fr Define column sizes (fractions)
grid-template-columns: repeat(3, 1fr) Repeat column pattern
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr)) Responsive auto-fill grid
grid-template-rows: auto 1fr auto Define row sizes
grid-column: 1 / 3 Span item across columns
grid-row: 1 / -1 Span item across all rows
place-items: center Center items both axes (shorthand)
grid-template-areas:
"header header"
"sidebar main"
"footer footer" Named grid areas
font-family: 'Inter', sans-serif Font stack with fallback
font-size: 1rem | 16px | clamp(1rem, 2vw, 2rem) Font size (responsive with clamp)
font-weight: 400 | 700 | bold Font weight
line-height: 1.5 Line spacing (unitless ratio)
letter-spacing: 0.05em Space between characters
text-align: left | center | right | justify Text alignment
text-decoration: underline | line-through | none Text decoration
text-transform: uppercase | lowercase | capitalize Text case transform
white-space: nowrap Prevent text wrapping
text-overflow: ellipsis Truncate overflow with ...
color: #ff6600 | rgb(255, 102, 0) | hsl(24, 100%, 50%) Text color (hex/rgb/hsl)
background-color: var(--bg) Background color (CSS variable)
background: linear-gradient(to right, #f00, #00f) Linear gradient background
opacity: 0.5 Element transparency (0-1)
box-shadow: 0 4px 6px rgba(0,0,0,0.1) Box shadow
border: 1px solid #ccc Border shorthand
border-radius: 0.5rem | 50% Rounded corners (50% = circle)
outline: 2px solid blue Outline (doesn't affect layout)
transition: all 0.3s ease Smooth property transitions
transition: transform 0.2s, opacity 0.2s Transition specific properties
transform: translateX(10px) Move element
transform: scale(1.1) rotate(5deg) Scale and rotate
@keyframes fade {
from { opacity: 0 }
to { opacity: 1 }
} Define keyframe animation
animation: fade 0.3s ease-in forwards Apply animation
will-change: transform Hint browser for optimization
@media (max-width: 768px) { ... } Mobile-first breakpoint
@media (min-width: 1024px) { ... } Desktop breakpoint
@media (prefers-color-scheme: dark) { ... } Dark mode media query
@media (prefers-reduced-motion: reduce) { ... } Reduce animations for accessibility
@container (min-width: 400px) { ... } Container query
clamp(1rem, 3vw, 2rem) Fluid sizing (min, preferred, max)
Free Online CSS Cheatsheet
A searchable CSS quick reference covering selectors, layout, Flexbox, Grid, typography, colors, animations, and responsive design patterns. Copy any property with one click.
About this cheatsheet
A comprehensive CSS cheatsheet covering modern layout and styling techniques.
- 70+ CSS properties and patterns
- 8 categories including Flexbox and Grid
- Modern selectors (:has, :is, :not)
- Responsive design patterns
- One-click copy to clipboard
- Container queries and clamp()
100% free. No signup required. No data collected or sent anywhere.