CSS Quick Syntax Reference & Cheat Sheet Matrix

Bookmark this comprehensive CSS Quick Reference Cheat Sheet for rapid lookup during university web design lab exams, interview preparation, and day-to-day front-end engineering.

1. Selector Specificity Scoreboard Quick Reference

Selector Syntax	Classification	Specificity Score
`style="..."`	Inline Style	(1, 0, 0, 0)
`#header`	ID Selector	(0, 1, 0, 0)
`.btn`, `[type="text"]`, `:hover`	Class, Attribute, Pseudo-class	(0, 0, 1, 0)
`p`, `div`, `::before`	Element, Pseudo-element	(0, 0, 0, 1)
`*`, `:where()`	Universal & Forgiving Reset	(0, 0, 0, 0)

2. CSS Box Model Universal Reset Template

/* Copy-paste at the top of every new web project */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

3. Flexbox vs. CSS Grid Quick Decision Matrix

Feature	Flexbox (1D)	CSS Grid (2D)
Dimensions	1-Dimensional (Row OR Column)	2-Dimensional (Rows AND Columns)
Philosophy	Content-driven (Items define space)	Layout-first (Grid defines tracks)
Centering	`justify-content: center; align-items: center;`	`place-items: center;`
Best Used For	Navbars, tags, buttons, icon alignment	Full page templates, photo galleries, dashboards

4. Modern Responsive Fluid Typography Formula

/* Fluid Headline: 1.5rem (mobile) -> 3rem (desktop) */
h1 {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
}

/* Fluid Body Text: 1rem (mobile) -> 1.25rem (desktop) */
body {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
}