ReviseAlgo Logo

Interview

CSS Interview Questions

Master CSS interview prep, covering specificity hierarchy math, layout flex grids, z-index contexts, and performance optimizations.

Last Updated: July 15, 2026 • 15 min read

1. Learning Objectives

In this guide, you will review core CSS interview questions. By the end of this prep session, you will be able to:

  • Calculate CSS selector specificity score coordinates.
  • Explain the parts of the CSS Box Model.
  • Choose between Flexbox and CSS Grid layouts.
  • Debug z-index stacking context conflicts.
  • Optimize animation performance using GPU-friendly properties.

2. Overview

CSS layout logic, cascading behaviors, and rendering performance are common topics in frontend engineering interviews. Interviewers test your ability to structure stylesheets, explain centering methods, and solve layout bugs.

3. Core Concept Questions

Q1: How does CSS Specificity work, and how is it calculated?

View Solution

Answer: Specificity is a weight system browsers use to determine which CSS rule applies to an element when multiple selectors target it. Specificity is calculated using a four-digit score: (inline, ID, class/pseudo-class/attribute, element/pseudo-element).

  • Inline styles: Score 1,0,0,0 (highest weight).
  • IDs (e.g. #header): Score 0,1,0,0.
  • Classes, attributes, and pseudo-classes (e.g. .btn, [type="text"], :hover): Score 0,0,1,0.
  • Elements and pseudo-elements (e.g. div, h1, ::before): Score 0,0,0,1.
  • Universal selector (*): Score 0,0,0,0.
  • !important rule: Overrides all specificity scores, but is not counted in the specificity calculation.

Q2: Explain the CSS Box Model and how box-sizing: border-box changes it.

View Solution

Answer: Every HTML element is represented as a rectangular box. The Box Model consists of: Content (width/height), Padding (inner space), Border, and Margin (outer space).

  • content-box (default): The declared width and height apply only to the content area. Padding and borders are added to the outer dimensions, making the element larger than declared.
    Total Width = width + padding-left + padding-right + border-left + border-right
  • border-box: The declared width and height apply to the entire element, including content, padding, and borders. Padding and borders shrink the content area, keeping the element's outer dimensions fixed.
    Total Width = declared width (padding/border fit inside)

Q3: When should you choose Flexbox over CSS Grid, or vice versa?

View Solution

Answer:

  • Choose Flexbox (One-dimensional layouts): Best for aligning elements along a single axis (either horizontally in a row or vertically in a column). Useful for navigation menus, headers, or item lists.
  • Choose CSS Grid (Two-dimensional layouts): Best for aligning elements along columns and rows simultaneously. Useful for page structures, dashboard cards, or image galleries.

4. Scenario-Based Questions

Q1: You set z-index: 999 on a child element, but it remains behind a sibling block with z-index: 1. Why does this happen?

View Solution

Answer: This happens due to a Stacking Context conflict. If the child's parent container has a lower z-index or forms a separate stacking context (e.g. having position: relative; z-index: 0), the child's high z-index: 999 is bounded inside that parent container. It cannot override siblings outside the parent container that belong to a higher stacking context.

5. Code Challenges

Challenge 1: Center this box precisely using CSS Grid:

View Solution

Fixed CSS:

6. Summary & Key Takeaways

  • • Understand specificity scoring rules to avoid override conflicts.
  • • Use flex layouts for simple rows or columns, and grid layouts for complex 2D grids.