.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)
CSS Cheat Sheet — Flexbox, Grid, Selectors & Pseudo-Classes Reference
CSS has grown from styling text in 1996 to driving the entire layout layer of modern browsers, and the parts that bite have shifted with it. The cheatsheet below covers 70+ properties across selectors, layout, Flexbox, Grid, typography, colors, animations, and responsive design. Most trouble in real stylesheets does not come from forgetting properties. It comes from quirks that look obvious alone but unravel inside a cascade. An `#id` selector beats any number of class selectors on the same element because specificity weights id above class, so a single id rule in a global stylesheet pins a colour no `.theme-dark` override will dislodge. `z-index` only takes effect on a positioned element (or a flex/grid child with explicit z-index), so `z-index: 9999` on `position: static` does nothing at all. A `margin-top` on the first child of a parent without padding or a border collapses up into the parent and pushes the parent down instead. These are the snippets pulled up while debugging that — the right selector, the right `box-sizing`, the right media query — without rereading the spec from line one each time.
Common pitfalls in CSS
A few rules earn their place near the top of any modern stylesheet. `box-sizing: border-box` applied with a `*` reset keeps `width: 300px` meaning exactly 300px on screen instead of 300px plus whatever padding and border later add — the default `content-box` model is the cause of more layout drift than any other single property. Specificity is read as four columns, not a single number: inline styles outrank ids, ids outrank classes and attributes, classes outrank type selectors, and within the same weight the last rule wins. The `:has()` selector finally provides a real parent match (`article:has(> img)`) and rewrites whole patterns that previously needed JavaScript. Grid and Flexbox stop nesting cleanly when an intermediate `display: contents` element interrupts the chain or when a child has `min-width: auto` (the default), which lets flex items overflow their container in subtle ways. The cheatsheet groups all of this into Selectors, Layout, Flexbox, Grid, Typography, Colors, Animations, and Responsive so the right section is one click away.
- 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()
Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).