What CSS questions are asked in interviews?

Specificity and the cascade, the box model and box-sizing, display and positioning, z-index and stacking contexts, Flexbox versus Grid, media queries and responsive units, and CSS performance.

What is the difference between Flexbox and CSS Grid?

Flexbox lays items out in one dimension, a row or a column, and is ideal for aligning items inside a component. Grid lays items out in two dimensions, rows and columns together, and is ideal for page and section layouts.

Are these CSS questions good for freshers?

Yes. Start with the Beginner questions in CSS fundamentals and the box model, then work up to Flexbox, Grid and responsive design, which most frontend interviews include.

10 modules · 100 questions

CSS interview questions and answers

These 100 CSS interview questions cover the topics frontend interviews focus on: how the cascade and specificity decide which rule wins, the box model and units, display, positioning and stacking contexts, Flexbox and CSS Grid layouts, responsive design, typography and theming, animations and performance, and practical layout scenarios. They are grouped into 10 modules and tagged Beginner, Intermediate or Advanced.

Read all answers Try the online compiler

How each answer is written

Each answer opens with a short version you could give in an interview, then explains the concept in depth with a code example and its result, common mistakes and an interview tip. The first three answers are below in full; sign in to read all 100.

Sample questions with full answers

Question 1 · Beginner

What is CSS, and how does it work with HTML?

CSS (Cascading Style Sheets) is the language that describes how HTML elements are presented: layout, colours, typography, spacing and animation. The browser matches CSS rules to DOM elements, computes a final value for every property, and uses those values to lay out and paint the page.

A CSS rule is a selector plus a declaration block: selector { property: value; }. The browser parses stylesheets into the CSSOM, combines it with the DOM into the render tree, then performs layout and paint.

Keeping styling in CSS (not in HTML attributes) means one change in a stylesheet restyles every page. In the Webvoid admin portal, for example, the sidebar, tables and buttons share one design system, so changing the brand colour is a one-line token change rather than editing hundreds of components.

Example

/* Webvoid admin portal: primary action button */
.btn-primary {
  background: #2563eb;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

Result: Every <button class="btn-primary"> in the portal (Save course, Publish lesson, Create user) gets the same look from a single rule.

Question 2 · Beginner

What are the different ways to add CSS to a web page?

There are three ways: external stylesheets via `<link rel="stylesheet">`, internal `<style>` blocks in the document, and inline `style` attributes on elements. External stylesheets are preferred for caching and maintainability.

External: cached by the browser and shared across pages — the default for production apps.
Internal <style>: useful for critical above-the-fold CSS or single-page emails/prints.
Inline style: highest precedence among author styles (besides !important); fine for values computed in JavaScript, such as a progress bar width.

Modern tooling adds more: CSS Modules, CSS-in-JS and utility frameworks like Tailwind, but they all compile to one of these three mechanisms. The Webvoid admin frontend uses Tailwind, which generates an external stylesheet at build time.

Example

<!-- External: global portal styles -->
<link rel="stylesheet" href="/assets/index.css">

<!-- Internal: critical CSS for the login page -->
<style>.login-card { max-width: 24rem; margin: 10vh auto; }</style>

<!-- Inline: dynamic value from JS (course completion) -->
<div class="progress-bar" style="width: 72%"></div>

Result: Global styles are cached, the login card renders instantly, and the progress bar width reflects live data.

Question 3 · Beginner

What does 'cascading' mean in Cascading Style Sheets?

The cascade is the algorithm that decides which declaration wins when several rules set the same property on the same element. It considers origin and importance, cascade layers, specificity, and finally source order.

Order of precedence (simplified, highest first):

Transitions, then !important declarations (user-agent > user > author for important).
Animations.
Normal author styles, ordered by cascade layers (@layer), with unlayered styles winning over layered ones.
Specificity of the selector.
Source order — the last declaration wins.

Inline styles sit above selector specificity in the normal author origin. Understanding this avoids 'specificity wars' and unnecessary !important.

Example

/* Webvoid course card */
.card { background: white; }
.card.featured { background: #eff6ff; }   /* higher specificity wins */
.card { border: 1px solid #e5e7eb; }
.card { border-color: #2563eb; }          /* later rule wins */

Result: A featured course card is light blue with a blue border.

All 100 questions by topic

Module 1. CSS Fundamentals
- What is CSS, and how does it work with HTML? (Beginner)
- What are the different ways to add CSS to a web page? (Beginner)
- What does 'cascading' mean in Cascading Style Sheets? (Beginner)
- What is the difference between inheritance and the cascade in CSS? (Intermediate)
- What are CSS custom properties (CSS variables), and why are they useful? (Intermediate)
- What is the difference between a CSS reset and normalize.css? (Beginner)
- What are pseudo-classes and pseudo-elements? (Beginner)
- What is the difference between display: none, visibility: hidden and opacity: 0? (Beginner)
- What are CSS preprocessors, and do we still need them? (Intermediate)
- How does the browser apply CSS, and what makes CSS render-blocking? (Intermediate)
Module 2. Selectors, Specificity and the Cascade
- What is CSS specificity, and how is it calculated? (Intermediate)
- When is it appropriate to use !important? (Intermediate)
- What are the different types of CSS combinators? (Beginner)
- What are attribute selectors, and where are they useful? (Beginner)
- What is the :has() selector, and why is it called the parent selector? (Intermediate)
- What is the difference between :is() and :where()? (Advanced)
- What are CSS cascade layers (@layer), and what problem do they solve? (Advanced)
- How do :nth-child() and :nth-of-type() differ? (Intermediate)
- How do :focus, :focus-visible and :focus-within differ? (Intermediate)
- How do you avoid specificity problems in a large CSS codebase? (Advanced)
Module 3. Box Model and Units
- Explain the CSS box model. (Beginner)
- What is the difference between box-sizing: content-box and border-box? (Beginner)
- What is margin collapsing, and when does it happen? (Intermediate)
- What are the differences between px, em, rem, %, vw and vh units? (Beginner)
- What are dvh, svh and lvh units, and why were they introduced? (Intermediate)
- How do clamp(), min() and max() help create fluid designs? (Intermediate)
- What is the difference between width: auto and width: 100%? (Intermediate)
- What is the aspect-ratio property, and how is it used? (Beginner)
- How do you handle overflowing content in CSS? (Intermediate)
- What are logical properties in CSS? (Intermediate)
Module 4. Display, Positioning and Stacking
- What is the difference between display: block, inline and inline-block? (Beginner)
- Explain the different values of the position property. (Beginner)
- How does position: sticky work, and why might it not stick? (Intermediate)
- What is z-index, and what is a stacking context? (Advanced)
- What is a Block Formatting Context (BFC)? (Advanced)
- How do floats work, and are they still used? (Beginner)
- How do you center an element horizontally and vertically? (Beginner)
- What is the difference between visibility: collapse, display: contents and display: none? (Advanced)
- What is CSS containment (contain and content-visibility)? (Advanced)
- How do you create a full-height layout with a sticky footer? (Intermediate)
Module 5. Flexbox
- What is Flexbox, and when should you use it? (Beginner)
- What is the difference between justify-content, align-items and align-content? (Beginner)
- Explain flex-grow, flex-shrink and flex-basis. (Intermediate)
- What does flex-wrap do, and how does gap work in flexbox? (Beginner)
- How does the order property work, and what are its accessibility risks? (Intermediate)
- How do you build a navigation bar with the logo on the left and links on the right using Flexbox? (Beginner)
- Why do flex items sometimes overflow their container, and how do you fix it? (Intermediate)
- How do you make equal-height cards with the footer button aligned at the bottom? (Intermediate)
- What is the difference between inline-flex and flex? (Beginner)
- How do you create a responsive sidebar layout with Flexbox? (Intermediate)
Module 6. CSS Grid
- What is CSS Grid, and how is it different from Flexbox? (Beginner)
- What is the fr unit in CSS Grid? (Beginner)
- What is the difference between auto-fill and auto-fit in grid? (Intermediate)
- How do grid-template-areas work? (Intermediate)
- What is subgrid, and what problem does it solve? (Advanced)
- What is the difference between implicit and explicit grids? (Intermediate)
- How do you place and span items in a grid using line numbers? (Beginner)
- How do you align items within a grid cell? (Beginner)
- How would you build a responsive dashboard layout with CSS Grid? (Intermediate)
- When should you choose Grid over Flexbox for a component? (Intermediate)
Module 7. Responsive Design
- What is responsive web design? (Beginner)
- What is the mobile-first approach in CSS? (Beginner)
- How do media queries work, and what can they test? (Beginner)
- What are container queries, and how are they different from media queries? (Advanced)
- How do you make images and videos responsive with CSS? (Beginner)
- How do you create fluid typography? (Intermediate)
- How do you handle responsive tables? (Intermediate)
- How do you respect user preferences such as reduced motion and dark mode in CSS? (Intermediate)
- How do you test and debug responsive layouts? (Intermediate)
- How do you prevent horizontal scrolling on mobile? (Intermediate)
Module 8. Typography, Colors and Theming
- How do you load and optimise custom web fonts? (Intermediate)
- What are line-height best practices, and why is unitless line-height recommended? (Beginner)
- What colour formats does CSS support, and what are the benefits of OKLCH? (Intermediate)
- How do you implement light and dark themes in CSS? (Intermediate)
- How do you ensure sufficient colour contrast? (Beginner)
- What is the difference between rem-based spacing scales and arbitrary values? (Intermediate)
- How do text-overflow, white-space and word-break work together? (Intermediate)
- How do CSS gradients, shadows and filters affect design and performance? (Intermediate)
- How do you style form controls consistently across browsers? (Intermediate)
- How would you build a design token system for a multi-product company like Webvoid? (Advanced)
Module 9. Animations, Performance and Modern CSS
- What is the difference between CSS transitions and animations? (Beginner)
- Which CSS properties are cheap to animate, and why? (Advanced)
- How do @keyframes and animation properties work? (Intermediate)
- What are scroll-driven animations in CSS? (Advanced)
- What is the View Transitions API, and how does CSS control it? (Advanced)
- What does @supports do, and how do you use progressive enhancement in CSS? (Intermediate)
- What is CSS nesting, and how does the & selector work? (Intermediate)
- What is @scope in CSS? (Advanced)
- How do the popover attribute and CSS anchor positioning work together? (Advanced)
- How do you measure and improve CSS performance? (Advanced)
Module 10. Practical Webvoid Scenarios
- How would you build the Webvoid admin portal layout with a collapsible sidebar? (Intermediate)
- How would you style the Webvoid resume builder for printing and PDF export? (Advanced)
- How would you build the Webvoid job tracker kanban board in CSS? (Intermediate)
- How would you style the Webvoid ATS score indicator to be accessible and visually clear? (Intermediate)
- How would you build the Webvoid coding platform's split-pane editor layout? (Advanced)
- How would you create themeable course cards for the Webvoid learning platform? (Intermediate)
- How would you migrate legacy CSS in the Webvoid admin portal to Tailwind or a design system without breaking pages? (Advanced)
- How would you debug a CSS style that is not being applied? (Beginner)
- How would you make the Webvoid lesson reader comfortable and accessible for long reading sessions? (Intermediate)
- How would you review a CSS pull request for quality, performance and accessibility? (Advanced)

Frequently asked questions

What CSS questions are asked in interviews?: Specificity and the cascade, the box model and box-sizing, display and positioning, z-index and stacking contexts, Flexbox versus Grid, media queries and responsive units, and CSS performance.
What is the difference between Flexbox and CSS Grid?: Flexbox lays items out in one dimension, a row or a column, and is ideal for aligning items inside a component. Grid lays items out in two dimensions, rows and columns together, and is ideal for page and section layouts.
Are these CSS questions good for freshers?: Yes. Start with the Beginner questions in CSS fundamentals and the box model, then work up to Flexbox, Grid and responsive design, which most frontend interviews include.

Read all 100 answers

Read all answers

How each answer is written

Sample questions with full answers

What is CSS, and how does it work with HTML?

Example

What are the different ways to add CSS to a web page?

Example

What does 'cascading' mean in Cascading Style Sheets?

Example

All 100 questions by topic

Module 1. CSS Fundamentals

Module 2. Selectors, Specificity and the Cascade

Module 3. Box Model and Units

Module 4. Display, Positioning and Stacking

Module 5. Flexbox

Module 6. CSS Grid

Module 7. Responsive Design

Module 8. Typography, Colors and Theming

Module 9. Animations, Performance and Modern CSS

Module 10. Practical Webvoid Scenarios

Frequently asked questions

More interview questions

Read all 100 answers