CSS · cheatsheet

CSS cheatsheet

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

https://yasirarfat.com/tutorials/cheatsheets/css — every section links back to the live page.

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;
}

: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

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

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; }