CSS Reference

The CSS Cheat Sheet Every Frontend Dev Keeps Open

Every selector, Flexbox property, Grid value, and animation shorthand — organised so you stop Googling "align-items vs justify-content" mid-layout. Complete reference for modern CSS including custom properties and media queries.

$9
One-time payment · Instant PDF download
📄 PDF format ⚡ Instant download 🖨️ Print-ready ♾️ Keep forever
css-cheat-sheet.pdf
FLEXBOX
display: flexEnable flexbox
justify-content:Main axis
align-items:Cross axis
CSS GRID
display: gridEnable grid
grid-template-columns:Define cols
gap:Row & column gap
SELECTORS
.class, #id, *Basic selectors
:hover, :focus, :nth-childPseudo-classes
::before, ::afterPseudo-elements

What's inside the CSS Cheat Sheet

8 sections covering every part of modern CSS — from the basics of selectors to Flexbox, Grid, animations and responsive design.

🎯

Selectors & Specificity

Target exactly the elements you want and understand why your styles are or aren't applying.

  • Type, class, ID and universal selectors
  • Attribute selectors
  • Combinators (child, sibling, adjacent)
  • Specificity calculation rules
📦

Box Model & Sizing

Master how CSS calculates element dimensions — the foundation everything else is built on.

  • content, padding, border, margin
  • box-sizing: border-box
  • min/max-width and min/max-height
  • overflow and clipping
↔️

Flexbox (all 12 properties)

The complete Flexbox reference — container and item properties — so you never guess again.

  • flex-direction, flex-wrap, flex-flow
  • justify-content (all 6 values)
  • align-items and align-content
  • flex-grow, flex-shrink, flex-basis

CSS Grid (complete reference)

Two-dimensional layout mastered — columns, rows, areas and spanning.

  • grid-template-columns and rows
  • fr unit and repeat()
  • grid-area and named areas
  • grid-column/row spanning
📍

Positioning (all 5 values)

Place elements exactly where you want them — relative, absolute, fixed, sticky and static.

  • static, relative, absolute
  • fixed and sticky positioning
  • z-index and stacking contexts
  • top, right, bottom, left properties

Transitions & Animations

Add motion to your UI with the transition and animation shorthand properties.

  • transition shorthand and properties
  • Easing functions and cubic-bezier
  • @keyframes syntax
  • animation shorthand (all 8 values)
🎨

CSS Custom Properties

Use CSS variables to build themeable, maintainable stylesheets.

  • Declaring --variables in :root
  • var() function with fallbacks
  • Scoping variables to components
  • Updating variables with JavaScript
📱

Media Queries & Responsive

Build layouts that work on every screen size with the right breakpoint patterns.

  • @media syntax and breakpoints
  • min-width and max-width queries
  • prefers-color-scheme and reduced-motion
  • Container queries (modern CSS)

Who this cheat sheet is for

  • Frontend developers who Google Flexbox properties every single time they use them
  • Designers learning CSS who need a clear property reference
  • Full-stack developers styling their own projects without a design system
  • Developers transitioning from Bootstrap to writing custom CSS
  • Anyone who still forgets the difference between align-items and justify-content

What you get

📄
PDF file
High-resolution, print-ready PDF. Works on any device.
Instant access
Download immediately after purchase via Gumroad.
🖨️
Print-optimised
Designed to look perfect on A4 or US Letter paper.
♾️
Yours forever
One payment. No subscription. Download again any time.
Instant Download
$9
One-time payment · PDF · No subscription

Get the CSS Cheat Sheet now

Stop Googling Flexbox. Keep the complete reference open instead.

Buy on Gumroad →