CSS interview revision notes

What is CSS? Selectors & cascade

Simple real-life example (Understand first — very important for understanding)

• HTML is the structure (walls and rooms); CSS is the paint, fonts, spacing, and layout.
• The cascade is like layers of instructions: browser defaults → external stylesheets → inline styles; later and more specific rules win.

Real-world idea: CSS controls how elements look (color, size, position). You target elements with selectors; when multiple rules apply, specificity and order decide which one wins.

Technical definition

• Selector types: element (p), class (.btn-primary), id (#main), attribute ([type="text"]), pseudo-classes (:hover, :focus), pseudo-elements (::before).
• Cascade order: importance (!important), specificity, source order. Specificity: inline > id > class/attribute/pseudo-class > element.
• Box model: every element is a box (content + padding + border + margin).

Code example

p { color: #333; }
.highlight { background: yellow; }
#main-title { font-size: 2rem; }
button:hover { opacity: 0.9; }

Why it matters

You can’t debug layouts or styling bugs without understanding selectors, specificity, and the box model.

Interview tip

Be ready to explain specificity, the box model, and how you’d debug a style that isn’t applying as expected.

Box model, display & positioning

Simple real-life example (Understand first — very important for understanding)

• Think of each element as a box with inner content, padding (inside space), border (frame), and margin (outside space).
• Display controls how boxes behave in the flow: block takes full width with a new line; inline flows with text; inline-block mixes both.

Real-world idea: a lot of layout bugs come from misunderstanding how boxes size and sit next to each other. Control display, width/height, margins, padding, and position to place things accurately.

Technical definition

• display: block, inline, inline-block, flex, grid, none.
• position: static (default), relative, absolute, fixed, sticky. Positioned elements can use top/right/bottom/left relative to containing block.
• box-sizing: content-box (default) vs border-box (width includes padding and border).

Code example

*, *::before, *::after { box-sizing: border-box; }
.card {
  display: inline-block;
  padding: 1rem;
  margin: 0.5rem;
  border: 1px solid #ddd;
}
.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

Why it matters

Box model and display/position are the basis for all layouts. Many interview tasks involve fixing or creating layouts using these properties.

Interview tip

Explain box model, why you often set box-sizing: border-box, and when you’d use absolute vs fixed vs sticky positioning.

Flexbox & CSS Grid for layout

Simple real-life example (Understand first — very important for understanding)

• Flexbox: like arranging items in a single row or column that can flex to fill space and wrap.
• Grid: like a spreadsheet; you define rows and columns and place items into grid cells.

Real-world idea: use flexbox for 1D layouts (navbars, toolbars, aligning items); use grid for 2D layouts (overall page, complex dashboards).

Technical definition

• Flexbox container: display: flex; main properties: flex-direction, justify-content, align-items, flex-wrap.
• Flex items: flex: grow shrink basis; align-self overrides per-item alignment.
• Grid: display: grid; define grid-template-columns/rows, gap; place items with grid-column and grid-row.

Code example (flexbox)

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Code example (grid)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Why it matters

Modern responsive layouts are built with flexbox and grid. Many frontend interviews include a layout exercise that expects you to know these.

Interview tip

Explain when you’d choose flex vs grid and mention common properties (justify-content, align-items, grid-template-columns, gap).

Responsive design & media queries

Simple real-life example (Understand first — very important for understanding)

• Responsive design is like furniture that adjusts to different room sizes: it looks good on a phone, tablet, and desktop.
• You use flexible units (%, rem, vw) and breakpoints (media queries) to change layout at different screen widths.

Real-world idea: a responsive site adapts to any device width without horizontal scroll. You design mobile-first and add breakpoints where layout needs to change.

Technical definition

• Media queries: @media (min-width: 768px) { ... } change styles based on viewport size or other features.
• Use relative units: rem/em for fonts and spacing; % and fr for flexible widths; max-width instead of fixed width where possible.
• Mobile-first: write base styles for small screens, then add min-width media queries for larger breakpoints.

Code example

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Why it matters

Most traffic is mobile. Responsive design is a must-have skill and is frequently tested with layout exercises.

Interview tip

Explain mobile-first CSS, give an example media query, and mention using flexible units and breakpoints instead of fixed pixel widths everywhere.