CSS Interview Cheat Sheet

Complete CSS reference covering selectors, layouts, CSS3+ features, and common interview questions.

Overview

Category:INTERVIEW PREP

Difficulty:INTERMEDIATE

Last Updated:2025-01-10

Tags:

CSSInterviewSelectorsFlexboxGridCSS3Responsive Design

Comprehensive CSS interview preparation guide covering selectors & specificity, modern layout systems (Flexbox, Grid), CSS3+ features, responsive design, and common interview scenarios with visual examples.

Reference Content

📚 Core Concepts

CSS Box Model

┌─────────────────────────────────────┐
│              MARGIN                 │
├─────────┬─────────────────┬─────────┤
│         │     BORDER      │         │
│ MARGIN  ├─────────────────┤ MARGIN  │
│         │    PADDING     │         │
│         ├─────────────────┤         │
│         │    CONTENT     │         │
│         │               │         │
│         └─────────────────┘         │
└─────────────────────────────────────┘

Specificity Hierarchy

Interview Context: This is CSS fundamentals - you MUST know this cold. How to Calculate: Count each selector type, compare left-to-right.

Inline styles:     1,0,0,0  (highest - style="color: red")
IDs:              0,1,0,0  (#header, #nav)
Classes/Attrs:    0,0,1,0  (.button, [type="text"], :hover)
Elements:         0,0,0,1  (div, p, h1)

Key Rules:

Higher specificity always wins
Equal specificity? Last rule wins (cascade)
!important trumps everything (avoid!)
Inline styles beat everything

Common Interview Question: "Which rule applies?"

div.header { color: blue; }      / 0,0,1,1 /
#main div { color: red; }        / 0,1,0,1 /
.header { color: green; }        / 0,0,1,0 /

Answer: Red wins (ID beats class+element)

Layout Systems

/ Container properties /
.flex-container {
  display: flex;
  flex-direction: row | column | row-reverse | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | center | flex-end | baseline;
  align-content: stretch | flex-start | center | flex-end | space-between;
  gap: 1rem; / Modern gap property /
}/ Item properties /
.flex-item {
  flex: 1 0 auto; / grow shrink basis /
  align-self: auto | flex-start | center | flex-end | stretch;
  order: 1; / Change visual order /
}

Flexbox Layout Patterns

Row Layout (justify-content: space-between):
┌─────────────────────────────────────────────────┐
│ [Item 1]        [Item 2]        [Item 3]       │
└─────────────────────────────────────────────────┘Column Layout (align-items: center):
┌──────────┐
│ [Item 1] │
│ [Item 2] │
│ [Item 3] │
└──────────┘Flex Wrap:
┌─────────────────────────────┐
│ [1] [2] [3]                 │
│ [4] [5]                     │
└─────────────────────────────┘

CSS3+ Modern Features

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 1rem;
  --spacing-unit: 8px;
}.component {
  color: var(--primary-color);
  font-size: calc(var(--font-size-base) * 1.25);
  padding: calc(var(--spacing-unit) * 2);
  
  / Fallback values /
  background: var(--undefined-var, #fallback);
}/ Dynamic theming /
[data-theme="dark"] {
  --primary-color: #4dabf7;
  --background: #1a1a1a;
}

Responsive Design

/ Mobile-first approach /
.component { / Mobile styles (320px+) / }@media (min-width: 768px) {
  .component { / Tablet styles / }
}
@media (min-width: 1024px) {
  .component { / Desktop styles / }
}
@media (min-width: 1440px) {
  .component { / Large desktop / }
}/ Modern queries /
@media (orientation: landscape) { / Landscape mode / }
@media (hover: hover) { / Devices with hover capability / }
@media (prefers-color-scheme: dark) { / System dark mode / }

Performance & Optimization

/ Above-the-fold critical styles /
.hero, .navigation, .header {
  / Critical styles here /
}/ Preload important fonts /
/  // Font display strategies /
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
  font-display: swap; / or fallback, optional /
}

Common Interview Questions

Interview Context: Tests understanding of layout flow vs visual rendering. The Key Differences:

/ DISPLAY: NONE - Element completely removed / .hidden { display: none; / ❌ Not in document flow / / ❌ No space reserved / / ❌ Screen readers ignore / / ❌ Cannot receive events / / ✅ Other elements reflow / } / VISIBILITY: HIDDEN - Element invisible but present / .invisible { visibility: hidden; / ✅ Stays in document flow / / ✅ Space is reserved ("ghost" element) / / ⚠️ Screen readers may announce / / ❌ Cannot receive focus / / ✅ Children can override with visibility: visible / }

/ OPACITY: 0 - Element transparent but interactive / .transparent { opacity: 0; / ✅ Stays in document flow / / ✅ Space is reserved / / ✅ Still clickable and focusable / / ✅ Screen readers still read / / ✅ Smooth animation possible / }

When to use each:

display: none: Responsive design (hide mobile nav on desktop), conditional content
visibility: hidden: Maintain layout while loading, hover effects
opacity: 0: Smooth fade animations, accessible hidden content

Follow-up questions:

"How does this affect accessibility?" (Screen reader behavior)
"Which can be animated?" (opacity smoothly, visibility jumps, display can't)
"Performance implications?" (display: none removes from render tree)

Browser Compatibility & Debugging

/ Feature queries /
@supports (display: grid) {
  .layout { display: grid; }
}@supports not (display: grid) {
  .layout { display: flex; }
}/ Vendor prefixes (automated by tools) /
.gradient {
  background: -webkit-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}

Quick Reference

display: block, inline, flex, grid, none
position: static, relative, absolute, fixed, sticky
box-sizing: content-box, border-box
overflow: visible, hidden, scroll, auto
z-index: stacking context control

💡 Quick Tips

Know the Box Model: Content → Padding → Border → Margin
Master Flexbox vs Grid: Flexbox for 1D, Grid for 2D layouts
Understand Specificity: Calculate specificity weights accurately
Practice Centering: Know multiple centering techniques
CSS Variables: Show knowledge of modern CSS features

⚠️ Common Gotchas

Flexbox: justify-content = main axis, align-items = cross axis
Grid: grid-template-areas names must be valid CSS identifiers
Position Sticky: Requires a scroll container and threshold value
Z-index: Only works on positioned elements