95 questions in 9 topics
CSS Basics Interview Questions
The basics of every junior round: how styles reach an element, display, units and centering.
- What is CSS and why do we use it?
- What are the three ways to add CSS to a page, and which one wins?
- What does "cascading" mean in CSS?
- What is the difference between a class and an id selector?
CSS Selectors and Specificity Interview Questions
Which selector matches what, and which rule wins when several match.
- What types of CSS selectors are there?
- What is the difference between div p, div > p, div + p and div ~ p?
- How is CSS specificity calculated?
- What does !important do, and why is it considered bad practice?
CSS Box Model Interview Questions
Content, padding, border and margin, how box-sizing changes the math, and margin surprises.
- What is the CSS box model?
- What is the difference between box-sizing: content-box and border-box?
- What is the difference between margin and padding?
- What is margin collapsing?
CSS Position, z-index and Float Interview Questions
The five position values, absolute children, sticky bugs and stacking contexts.
- What are the values of the position property?
- How is an absolutely positioned element placed?
- Why is my position: sticky not working?
- Why does my z-index: 999 not bring the element to the front?
CSS Flexbox Interview Questions
Axes, alignment, how flex-grow and flex-shrink share space, and the overflow bug everyone meets.
- What is Flexbox and when do you use it?
- What is the difference between justify-content and align-items?
- How do flex-grow, flex-shrink and flex-basis work together?
- What do flex: 1, flex: auto and flex: none mean?
CSS Grid Interview Questions
Grid versus Flexbox, fr units, auto-fill vs auto-fit, template areas and track sizing.
- What is the difference between Flexbox and CSS Grid?
- What is the fr unit in CSS Grid?
- What is the difference between auto-fill and auto-fit in repeat()?
- How do grid-template-areas work?
Responsive Design CSS Interview Questions
Media queries, mobile-first, relative units, fluid sizes and container queries.
- What are media queries and how do you write one?
- Why does a responsive page need the viewport meta tag?
- What is mobile-first CSS?
- What is the difference between em and rem?
CSS Animation and Transition Interview Questions
Transitions, keyframes, transforms, what is cheap to animate, and reduced motion.
- What is the difference between a CSS transition and a CSS animation?
- How do you create a CSS animation with @keyframes?
- What does the transform property do, and does it affect layout?
- Why can you not transition display: none, and what do you do instead?
Advanced CSS Interview Questions
Theming, formatting contexts, rendering performance, cascade layers and architecture for mid-level and senior developers.
- What are CSS custom properties, and how are they different from Sass variables?
- How would you implement dark mode in CSS?
- What is a block formatting context (BFC)?
- What is the difference between reflow and repaint, and what is layout thrashing?
Frequently Asked Questions
How do I prepare for a CSS interview?
Build small things from memory: a centered card, a Flexbox nav bar, a responsive card grid, a sticky header, a modal. Then explain out loud why each property is there. Most CSS rounds are "what does this do" questions or a short layout task.
What CSS questions are asked for freshers?
The three ways to add CSS, selectors and specificity, the box model and box-sizing, display and position values, em and rem, and centering. Expect a Flexbox question and a simple media query layout.
What do interviewers ask experienced frontend developers about CSS?
Reasoning more than definitions: why a layout breaks (stacking contexts, min-width: auto, margin collapsing), what is cheap to animate, how CSS affects page load, theming with custom properties, and keeping a large stylesheet maintainable. You may be asked to fix existing CSS.
Is CSS alone enough for a frontend interview?
No. Frontend rounds combine HTML, CSS and JavaScript, and most add a short JavaScript coding problem. Prepare the JavaScript interview questions and a few easy string and array problems.
Should I learn Flexbox or Grid first?
Flexbox first: most components use it. Learn Grid right after for page layouts and card grids; Flexbox vs Grid is one of the most common CSS questions.
