CSS Interview Questions

Question 1

What is the CSS Box Model?

Accepted Answer

Every element is a box: content, padding, border, margin. box-sizing: border-box includes padding/border in width. Layers: content, padding, border, margin. Default content-box: width applies to content only. border-box: width includes padding and border. Margin collapsing: adjacent vertical margins overlap. Use box-sizing: border-box globally.

Question 2

What is CSS specificity?

Accepted Answer

Specificity determines which rule wins: inline > ID > class > element. Higher specificity overrides lower. Calculated as (a,b,c,d): inline styles, ID selectors, class/attribute/pseudo-class, element/pseudo-element. !important overrides all. Equal specificity: last rule wins. Universal (*) adds no specificity.

Question 3

What is Flexbox?

Accepted Answer

Flexbox is a one-dimensional layout for rows or columns with flexible sizing: justify-content, align-items, flex-grow/shrink. Container: display:flex. Direction: flex-direction. Alignment: justify-content (main axis), align-items (cross axis). Item sizing: flex-grow, flex-shrink, flex-basis. Shorthand: flex:1. Use for navbars, centering, card layouts.

Question 4

What is CSS Grid?

Accepted Answer

CSS Grid is a two-dimensional layout system with rows and columns: grid-template-columns, grid-template-rows, gap. Container: display:grid. Tracks: grid-template-columns: 1fr 2fr, repeat(), minmax(). Placement: grid-column, grid-row, grid-area. Named areas: grid-template-areas. Use for page layouts, dashboards, complex responsive grids.

Question 5

Explain CSS position values.

Accepted Answer

static (default), relative (offset from normal), absolute (to positioned ancestor), fixed (to viewport), sticky (hybrid). static: normal flow. relative: offset but stays in flow, creates positioning context. absolute: removed from flow, positioned to nearest positioned ancestor. fixed: positioned to viewport. sticky: normal until scroll threshold, then fixed. z-index works only on positioned elements.

Question 6

What are CSS Custom Properties?

Accepted Answer

CSS variables (--name: value) store reusable values, support inheritance, and can be changed with JavaScript at runtime. Declaration: --primary: #04AA6D on :root. Usage: var(--primary, fallback). Benefits: design tokens, live runtime changes via JS, media query overrides for themes. Dark mode: prefers-color-scheme media query to swap variables.

Question 7

What are CSS transitions and animations?

Accepted Answer

Transitions animate between two states; animations define multi-step sequences with @keyframes for complex motion. Transitions: transition: property duration timing-function delay. Animations: @keyframes with multiple stops (0%, 50%, 100%). Performance: animate transform and opacity (GPU-accelerated). Use will-change sparingly.

Question 8

What are CSS Container Queries?

Accepted Answer

Container queries style elements based on parent container size rather than viewport, enabling truly responsive components. container-type: inline-size on parent; @container (min-width: 400px) {} on children. Unlike media queries, responds to component's actual available space. Supported in all modern browsers. Paradigm shift for responsive component design.

Question 9

What is CSS-in-JS?

Accepted Answer

CSS-in-JS writes styles in JavaScript (styled-components, Emotion), enabling scoped styles and dynamic values with runtime cost. Benefits: scoped styles, dynamic styling, colocation with components. Drawbacks: runtime cost, larger bundle. Alternatives: CSS Modules (no runtime), Tailwind CSS, vanilla CSS with BEM. Trend: zero-runtime solutions (vanilla-extract, Panda CSS).

Question 10

How do you implement responsive design?

Accepted Answer

Mobile-first with fluid layouts, relative units (rem, vw), media queries, responsive images (srcset), and container queries. Strategy: (1) Mobile-first base styles. (2) Fluid typography: clamp(). (3) Flexbox/Grid with fr units. (4) Responsive images: srcset, picture. (5) Content-based breakpoints. (6) Touch-friendly targets (48px). (7) Real device testing.

Free CSS Course - Learn CSS3, Flexbox, Grid & Responsive Design

What You'll Learn

Career Opportunities

Course Completion Certificate

Course Modules Overview

Introduction to CSS

CSS Box Model & Layout

CSS Typography & Colors

CSS Flexbox Layout

CSS Grid Layout

CSS Responsive Design

CSS Animations & Transitions

CSS Pseudo-classes & Pseudo-elements

CSS Variables & Modern Features

CSS Project: Component Library

CSS Architecture & Methodologies

CSS Career & Future

Course Curriculum

Introduction to CSS

CSS Box Model & Layout

CSS Typography & Colors

CSS Flexbox Layout

CSS Grid Layout

CSS Responsive Design

CSS Animations & Transitions

CSS Pseudo-classes & Pseudo-elements

CSS Variables & Modern Features

CSS Project: Component Library

CSS Architecture & Methodologies

CSS Career & Future

Your Learning Path

Beginner

Intermediate

Advanced

Tools & Technologies

VS Code

Chrome DevTools

Can I Use

Ready to Start Learning?

Related Free Courses

HTML Course

JavaScript Course

React.js Course

UI/UX Design Course