CSS Interview Prep

Imagine walking into a job interview having practiced coding for months, but nobody ever asked you to explain your reasoning out loud, only to write code silently. CSS interviews are different, they often test whether you can explain concepts clearly under pressure, not just whether you can produce working code, things like the box model, specificity, and the differences between layout systems. This chapter collects the most frequently asked CSS interview questions with concise, confident answers and small runnable examples, so you can walk in ready to explain your thinking, not just recite syntax.

In this page:

Explain the CSS Box Model
How Does Specificity Get Calculated
Flexbox vs Grid, and How to Center Elements
Explain the position Values and the Cascade
Pseudo-Class vs Pseudo-Element, and Inline vs Block vs Inline-Block

Explain the CSS Box Model

Every element is a rectangular box made of four layers from the inside out: content, padding, border, and margin. box-sizing: content-box, the default, makes width and height apply only to the content area, while box-sizing: border-box includes padding and border within the specified width and height.

Note: A strong interview answer mentions box-sizing explicitly, since it changes how width and height are actually calculated in practice.

Warning: Forgetting that margin sits outside the box model's width calculation entirely is a common mistake when explaining this concept live.

Example: Explain the CSS Box Model

css

<style>
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  background: lightblue;
  border: 1px solid #666;
}
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  background: lightgreen;
  border: 1px solid #666;
  margin-top: 10px;
}
</style>
<div class="content-box">content-box: renders 240px total</div>
<div class="border-box">border-box: stays 200px</div>

How Does Specificity Get Calculated

Specificity is calculated as a tuple of counts, inline styles, then ID selectors, then class, attribute, and pseudo-class selectors, then element and pseudo-element selectors, higher categories always outweigh any number of lower ones, and !important overrides normal specificity entirely.

Note: A quick trick for interviews: describe specificity as four buckets, inline, IDs, classes, elements, and compare buckets left to right rather than trying to add up a single score.

Warning: Many people incorrectly believe more selectors always means higher specificity, ten element selectors chained together still lose to a single class selector.

Example: How Does Specificity Get Calculated

css

<style>
a { color: black; }
.link { color: blue; }
#nav-link { color: red; }
</style>
<a href="#" id="nav-link" class="link">ID beats class beats element: red</a>

Flexbox vs Grid, and How to Center Elements

Flexbox arranges items along a single axis at a time, ideal for navigation bars and button groups, while Grid arranges items across rows and columns simultaneously, ideal for full page layouts. Centering an element is a frequent follow-up question, best answered with display: flex combined with align-items: center and justify-content: center.

Note: When asked how to center a div, confidently demonstrate flexbox centering first, then mention grid's place-items: center as a shorter alternative.

Warning: Claiming flexbox cannot wrap into multiple lines is a common factual mistake, flex-wrap: wrap allows flex items to flow onto new lines just like grid rows.

Example: Flexbox vs Grid, and How to Center Elements

css

<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  background: #eee;
}
.center div {
  background: coral;
  padding: 10px;
}
</style>
<div class="center">
  <div>Centered with flex + align-items + justify-content</div>
</div>

Explain the position Values and the Cascade

static is the default with no offset behavior, relative offsets an element from its normal position while preserving its space, absolute removes it from flow and positions it against the nearest positioned ancestor, fixed positions against the viewport, and sticky toggles between relative and fixed based on scroll. The cascade is the algorithm that resolves conflicting rules using origin, specificity, and source order in that priority.

Note: When explaining the cascade, mention the three tiebreakers in order: origin and importance first, then specificity, then source order as the final tiebreaker.

Warning: A frequent mistake is saying absolute positioning is always relative to the viewport, it is only relative to the viewport if no ancestor has a position other than static.

Example: Explain the position Values and the Cascade

css

<style>
.relative {
  position: relative;
  top: 10px;
  background: #eef;
  padding: 20px;
}
.absolute {
  position: absolute;
  top: 0;
  right: 0;
  background: coral;
  padding: 8px;
}
</style>
<div class="relative">
  <div class="absolute">Positioned against the relative ancestor</div>
</div>

Pseudo-Class vs Pseudo-Element, and Inline vs Block vs Inline-Block

A pseudo-class like :hover or :first-child targets an element in a particular state or structural position, written with a single colon, while a pseudo-element like ::before or ::after targets a generated sub-part of an element, written with a double colon. display: block elements take a full new line and accept width and height, inline elements flow with text and ignore width and height, and inline-block elements flow with text but do accept width and height.

Note: Mention the double-colon syntax for pseudo-elements confidently, ::before, it is a common detail interviewers listen for even though single-colon is still accepted for backward compatibility.

Warning: Claiming inline elements can never be sized is only half true, they ignore width and height but can still receive horizontal padding and margin, which surprises many candidates.

Example: Pseudo-Class vs Pseudo-Element, and Inline vs Block vs Inline-Block

css

<style>
li:first-child { font-weight: bold; }
li::before { content: "→ "; }
</style>
<ul>
  <li>First, bold, with an arrow prefix</li>
  <li>Second</li>
</ul>

Common Mistakes

Memorizing definitions word for word without being able to demonstrate them with a live example when asked to elaborate.
Confusing specificity with source order, a highly specific selector always wins regardless of where it appears in the stylesheet, unless !important or equal specificity is involved.
Answering flexbox versus grid questions as if one is strictly better, interviewers want to hear that the right choice depends on whether the layout is one-dimensional or two-dimensional.

Chapter Summary

Be ready to explain the box model, specificity, the cascade, and positioning with both words and a quick live example.
Understand the practical difference between flexbox for one-dimensional layouts and grid for two-dimensional layouts.
Know the distinction between pseudo-classes like :hover which target states, and pseudo-elements like ::before which target generated content.

Browser Support

All concepts covered in this chapter, the box model, specificity, flexbox, grid, positioning, and pseudo-classes and elements, are standard CSS features supported by every modern browser.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Frameworks Overview Next Lesson → CSS Flexbox