TutorialsPreview

CSS cheatsheet

CSS cheatsheet

Layout primitives, modern colour, container queries, the bits you Google twice a week.

Flex one-liners

Centre anything

.center { display: grid; place-items: center; }

Space children with the gap property

.row { display: flex; gap: 0.75rem; align-items: center; }

Auto-fit responsive grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

Selectors you forget

:is(h1, h2):first-childmatches first heading child of parent
:has(img)parent that contains a matching descendant (now baseline)
:where(...)like :is() but zero specificity
:focus-visiblefocus ring only for keyboard navigation
@container (width > 480px)container query — sized by parent, not viewport

Modern colour

color: oklch(70% 0.15 240)perceptually uniform colour space
color-mix(in oklab, A 30%, B)mix two colours in any space
accent-color: #22d3eetints native checkbox/radio/range UI

Animation snippets

Reduced-motion respect

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

View Transitions API

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 200ms; }