CSS Exam Cheat Sheet & Practice Questions 2026

This CSS exam cheat sheet covers every topic that shows up on front-end developer exams and technical interviews. Each section has the rule, the syntax, and a practice question so you can test yourself as you read.

1. Selectors & Specificity

Specificity order (lowest → highest):

• Element selectors (p, h1) — specificity 0-0-1
• Class, attribute, pseudo-class (.btn, [type], :hover) — 0-1-0
• ID selectors (#nav) — 1-0-0
• Inline styles — 1-0-0-0
• !important — overrides all

/* Specificity: 0-1-1 (class + element) */
p.intro { color: blue; }

/* Specificity: 0-0-1 (element only) — loses to above */
p { color: red; }

Practice question: Given #main p vs div.content p.intro, which wins? Answer: #main p — an ID (1-0-1) beats two classes (0-2-2).

2. The Box Model

• content — the text/image area
• padding — space inside the border
• border — the outline
• margin — space outside the border

/* Default: width = content only. Total = 300 + 20 + 2 = 322px */
.box { box-sizing: content-box; width: 300px; padding: 10px; border: 1px solid; }

/* border-box: width includes padding + border. Total = 300px */
.box { box-sizing: border-box; width: 300px; padding: 10px; border: 1px solid; }

Practice question: With box-sizing: content-box, a 200px wide element with padding: 20px and border: 2px — what is its total rendered width? Answer: 200 + 40 + 4 = 244px.

3. Flexbox Quick Reference

• justify-content — aligns items on the main axis (row direction by default)
• align-items — aligns items on the cross axis within a single line
• align-content — aligns multiple lines (only works when items wrap)
• flex-grow — how much an item expands to fill space
• flex-shrink — how much an item shrinks when space is tight
• flex-basis — the starting size before growing/shrinking

.container {
  display: flex;
  justify-content: space-between; /* space items across the row */
  align-items: center;            /* center items vertically */
  gap: 16px;
}
.item { flex: 1; }  /* shorthand: grow=1, shrink=1, basis=0 */

Practice question: What does flex: 1 expand to? Answer: flex-grow: 1; flex-shrink: 1; flex-basis: 0%.

4. CSS Grid Quick Reference

• grid-template-columns — defines column track sizes
• grid-template-rows — defines row track sizes
• fr unit — fraction of remaining space
• grid-column: 1 / 3 — item spans from line 1 to line 3 (2 columns)
• repeat(3, 1fr) — three equal-width columns

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;    /* fixed sidebar + flexible main */
  grid-template-rows: 64px 1fr 48px;  /* header + content + footer */
  gap: 16px;
}
.header { grid-column: 1 / -1; } /* span all columns */

Practice question: grid-template-columns: 1fr 2fr 1fr — if the container is 400px, how wide is the middle column? Answer: 400px total ÷ 4 fr = 100px per fr → middle = 200px.

5. Positioning

• static — default, in normal flow
• relative — offset from its normal position; still in flow
• absolute — removed from flow; positioned relative to nearest non-static ancestor
• fixed — removed from flow; positioned relative to viewport
• sticky — acts as relative until a scroll threshold, then fixed within its container

Practice question: An element with position: absolute and no positioned ancestor — where is it positioned? Answer: relative to the initial containing block (the viewport).

6. Responsive Design

• @media (max-width: 768px) — styles apply at 768px and below (mobile-first: use min-width instead)
• rem — relative to root font size (16px default → 1rem = 16px)
• em — relative to parent font size
• vw / vh — percentage of viewport width/height

/* Mobile-first: base styles apply to all, then expand upward */
.container { padding: 16px; }

@media (min-width: 768px) {
  .container { padding: 32px; max-width: 1200px; margin: 0 auto; }
}

Practice question: What is the difference between mobile-first and desktop-first CSS? Answer: mobile-first uses min-width breakpoints — base styles target small screens and you layer on complexity. Desktop-first uses max-width to strip styles down for mobile.

7. Pseudo-classes & Pseudo-elements

• Pseudo-class (single colon) — targets element state: :hover, :focus, :nth-child(), :not()
• Pseudo-element (double colon) — targets a virtual sub-element: ::before, ::after, ::first-line

Practice question: What is required for ::before and ::after to render? Answer: They must have a content property (even content: '').

Test yourself under exam conditions

Reading a cheat sheet is different from answering under pressure. The Examifyr CSS practice test has 20 questions across all the topics above — selectors, box model, Flexbox, Grid, and responsive design — and gives you an instant score with your exact weak areas.

Think you're ready? Prove it.

Take the free HTML & CSS readiness test. Get a score from 0–100, a topic breakdown, and your exact weak areas — in under 20 minutes.

Free · No sign-up · Instant results

More from Examifyr