CSS Interview Q&A & Cheat Sheet

Badar KhalilUpdated October 1, 2026 2 min read

CSS Interview Q&A & Cheat Sheet

This CSS interview questions guide rounds out the course with the most commonly asked questions in front-end interviews, plus a compact cheat sheet of properties and values you'll want fresh in memory before any technical interview.

1. Box Model Questions

Q: What is the CSS box model?

Every element is a box made up of content, padding, border, and margin, in that order from the inside out. Understanding this order is essential for predicting layout spacing.

Q: What's the difference between box-sizing: content-box and border-box?

content-box (default) adds padding and border on top of the specified width, while border-box includes padding and border within the specified width, making sizing more predictable.

2. Specificity and Cascade Questions

Q: How is CSS specificity calculated?

Specificity is calculated in four tiers: inline styles, IDs, classes/attributes/pseudo-classes, and element selectors — compared in that order to determine which rule wins.

Q: What happens when two selectors have equal specificity?

The rule that appears later in the source order wins.

3. Layout Questions (Flexbox & Grid)

Q: When would you use Flexbox over Grid?

Flexbox is best for one-dimensional layouts (a single row or column), while Grid excels at two-dimensional layouts involving both rows and columns simultaneously.

Q: What does justify-content vs align-items control in Flexbox?

justify-content aligns items along the main axis, while align-items aligns them along the cross axis.

4. Positioning Questions

Q: What's the difference between position: absolute and position: fixed?

absolute positions relative to the nearest positioned ancestor, while fixed positions relative to the viewport and stays in place during scrolling.

Q: What does position: sticky do?

It behaves like relative until a scroll threshold is reached, then behaves like fixed within its containing block.

5. Responsive Design Questions

Q: What's the difference between em and rem units?

em is relative to the font size of its parent element, while rem is always relative to the root (html) font size, making it more predictable for consistent scaling.

6. Quick-Reference Cheat Sheet

Category	Key Properties
Box Model	margin, padding, border, box-sizing
Flexbox	display: flex, justify-content, align-items, flex-wrap, gap
Grid	display: grid, grid-template-columns, grid-template-rows, gap
Positioning	position, top/right/bottom/left, z-index
Typography	font-size, line-height, font-weight, letter-spacing
Responsive	clamp(), min(), max(), media queries, container queries

Try It Yourself

Test your interview readiness with the live code challenge below.

Try it Yourself CSS

/* Quick cheat sheet demo: centering with Flexbox */
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 2px dashed #999;
}

Output

Press Run to execute.

Try it Yourself CSS

/* Specificity comparison */
#header .title { color: blue; }   /* ID + class = higher specificity */
.title { color: red; }             /* class only = lower, loses even though it's later */

Output

Press Run to execute.

Exercise: Interview Challenge: Fix the Specificity BugHTML

The paragraph below should be green, but it stays black because of a specificity conflict. Fix the CSS without using !important.

Try it Yourself HTML

<p id='msg' class='text'>Hello World</p>

<style>
#msg { color: black; }
.text { color: green; }
</style>

Output

Press Run to execute.

Show expected output

CSS fixed so the paragraph renders green, by increasing the specificity of the .text rule or adjusting the #msg rule, without using !important.

This is a self-check — compare your result with the expected output above.

Was this page helpful?