Cheat Sheets

CSS Cheat Sheet (2026): Selectors, Properties, Flexbox & Grid

By ArpaNeuro Team September 7, 2026
CSS cheat sheet frontend

A CSS cheat sheet lists the selectors, properties, and layout modules you reach for while building a UI. In 2026 that means Flexbox and Grid first, logical properties, custom properties, and mobile-first media queries — not only floats.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

  • Selector: element, .class, #id, [attr], :hover, :focus-visible, ::before.
  • Specificity: Inline > ID > class/attr/pseudo-class > element. Avoid !important except utilities.
  • Box model: width + padding + border unless box-sizing: border-box (use it globally).
  • Display: block, inline, inline-block, flex, grid, none.
  • Units: rem for type, %/fr for layout, svh for mobile viewport, ch for measure.
  • Color: color-mix(), oklch(), hex, and CSS variables for themes.
  • Cascade layers: @layer reset, base, components, utilities; to keep specificity sane.
  • Centering: Flex: display:flex; place-items:center; Grid: place-items:center on the grid container.
  • Truncate: overflow:hidden; white-space:nowrap; text-overflow:ellipsis; plus a max-width.
  • Print: @media print { nav, .cta { display:none; } }.

Copy-paste examples

Global box-sizing reset

Put this at the top of every stylesheet or CSS reset.

*, *::before, *::after {
  box-sizing: border-box;
}
html { font-size: 100%; }
body {
  margin: 0;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
}

Responsive two-column layout

Grid beats nested floats. Collapse to one column under 720px.

.layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1.5rem;
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
}

Common mistakes

  • Using px for all type so user zoom and root font-size changes do nothing.
  • Styling only :hover and skipping :focus-visible — keyboard users see no focus ring.
  • z-index: 9999 wars instead of a documented stacking scale (10, 20, 30).
  • Fixing layout with negative margins instead of gap on flex/grid.
  • Writing desktop CSS first and fighting it with max-width overrides.

FAQ

  1. Flexbox or Grid? Flexbox is for one-dimensional rows or columns (nav bars, button groups). Grid is for two-dimensional pages (dashboards, card galleries). Use both on the same page.
  1. What does BLOGPH0 vs BLOGPH1 mean? display changes layout boxes. appearance changes native form control look. Do not confuse them.
  1. Are CSS frameworks a replacement for this cheat sheet? No. Tailwind or Bootstrap still compile to CSS. You debug layout faster when you know Flexbox, Grid, and specificity.
  1. How do I make CSS faster? Avoid huge descendant selectors, split critical CSS, compress, and skip unused utility CSS on marketing pages.

Related CSS cheat sheets

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.

← All Articles Get a Quote →