Interview Questions

CSS interview questions and answers for beginners

Himanshu Sharma · 24 October 2026 · 8 min read

CSS interviews test whether you understand why a page looks the way it does, not whether you can recall property names. Expect questions about how rules compete, how boxes are sized, how layout works and how a design adapts to different screens. Here are 30 of the most common, with answers you can say in a few sentences. Each follows a lesson in the free CSS course.

Fundamentals

1. What is CSS, and how can you add it to a page?

Cascading Style Sheets describe presentation: colours, fonts, spacing and layout. Three ways: an external stylesheet (<link rel="stylesheet" href="style.css">, the best choice), an internal <style> element, and inline style attributes (hardest to maintain).

2. What does "cascading" mean?

When several rules apply to one element, the browser decides which wins using, in order: importance (!important), specificity, and source order (later wins). Origin (browser, user, author) also matters.

3. What is specificity, and how is it calculated?

A score for how targeted a selector is. Roughly: inline styles beat IDs, IDs beat classes, attributes and pseudo-classes, and those beat element selectors.

Selector	Specificity (IDs, classes, elements)
`p`	0,0,1
`.note`	0,1,0
`p.note`	0,1,1
`#intro`	1,0,0
`#intro .note p`	1,1,1

Compare left to right: 0,1,0 beats 0,0,9. The universal selector * adds nothing. Avoid !important and ID selectors for styling so rules stay easy to override.

4. What is inheritance?

Some properties pass from a parent to its children automatically (color, font-family, line-height), others do not (margin, padding, border, background). Force it with inherit; reset with initial or unset.

5. What are the main selector types?

Element (p), class (.card), ID (#top), attribute ([type="email"]), descendant (nav a), child (ul > li), adjacent sibling (h2 + p), general sibling (h2 ~ p), pseudo-classes (:hover, :focus, :nth-child(2)) and pseudo-elements (::before, ::after).

6. What is the difference between a pseudo-class and a pseudo-element?

A pseudo-class selects an element in a state (:hover, :first-child). A pseudo-element selects a part of an element or generates content (::first-line, ::before).

The box model and units

7. Explain the box model.

Every element is a box of four layers, from inside out: content, padding, border and margin. Margin is outside the border and is transparent; padding is inside and shows the background.

8. What does `box-sizing: border-box` do?

By default (content-box), width sets only the content, so padding and border are added on top: width: 200px; padding: 20px; border: 5px makes a box 250px wide. With border-box, width includes padding and border, so the box stays 200px. Many sites set * { box-sizing: border-box; }.

9. What is margin collapsing?

Vertical margins of adjacent block elements merge into one: the larger of the two, not the sum. A 30px bottom margin above a 20px top margin gives a 30px gap. Horizontal margins and margins in flex or grid items do not collapse.

10. What are the common units, and when do you use them?

px (fixed), % (relative to the parent), em (relative to the element's font size), rem (relative to the root font size), vw/vh (percent of the viewport width/height), fr (a share in Grid), and ch (the width of "0"). Use rem for type and spacing so the page respects the user's font settings.

11. What is the difference between `em` and `rem`?

em depends on the current element's font size (and compounds when nested); rem always uses the root (html) size, so it is predictable.

12. What is the difference between `display: none` and `visibility: hidden`?

display: none removes the element from the layout completely. visibility: hidden hides it but keeps its space. opacity: 0 is also invisible but still takes space and receives clicks.

Display and positioning

13. What do `block`, `inline` and `inline-block` mean?

block takes a full line and accepts width and height. inline flows with text and ignores width, height and vertical margins. inline-block flows like text but accepts width, height and margins.

14. Explain the `position` values.

static: the default, normal flow.
relative: normal flow, but can be offset from its own place; it becomes the reference for absolute children.
absolute: removed from the flow and placed relative to the nearest positioned ancestor.
fixed: relative to the viewport; stays when scrolling.
sticky: normal flow until a scroll threshold, then sticks.

15. How does `z-index` work?

It orders overlapping elements on the z-axis, but only on positioned elements (and flex/grid items). It works within a stacking context; a child can never rise above a sibling of its parent's context whatever its number.

16. What does `float` do, and what is clearing?

float pushes an element to one side so that text wraps around it. It was once used for layout; today use Flexbox or Grid. Containers that hold only floated children collapse, which is fixed with clear or display: flow-root.

Layout: Flexbox and Grid

17. What is Flexbox?

A one-dimensional layout system for arranging items in a row or a column inside a container with display: flex. It handles alignment, spacing and flexible sizing.

18. What is the difference between `justify-content` and `align-items`?

justify-content aligns items along the main axis (the row direction by default), align-items along the cross axis. Change the axis with flex-direction: column, and both swap.

19. What does `flex: 1` mean?

Shorthand for flex: 1 1 0%: the item can grow and shrink and starts from zero, so equal flex: 1 items share the space equally.

20. What is CSS Grid, and how does it differ from Flexbox?

Grid is a two-dimensional system (rows and columns together), good for page layouts. Flexbox is one-dimensional, best for components and rows of items. They are used together.

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

21. What does the `fr` unit do?

A fraction of the free space in a grid container: grid-template-columns: 1fr 2fr makes the second column twice as wide.

22. How do you centre a div horizontally and vertically?

.parent { display: grid; place-items: center; min-height: 100vh; }
/* or */
.parent { display: flex; justify-content: center; align-items: center; }

For horizontal-only centring of a block with a width, use margin-inline: auto.

Responsive design and effects

23. What is responsive design?

Building pages that adapt to any screen size using a viewport meta tag, flexible layouts (percentages, Flexbox, Grid), flexible images (max-width: 100%) and media queries.

24. What is a media query? What is mobile-first?

A rule that applies only when a condition is true: @media (min-width: 768px) { … }. Mobile-first means writing the base styles for small screens and adding min-width queries for larger ones.

25. How do you make images responsive in CSS?

img { max-width: 100%; height: auto; }. For art direction or different files, use srcset and <picture> in HTML.

26. What are CSS custom properties (variables)?

Declared with --name, used with var(--name, fallback), and they inherit and can be changed at runtime or per component:

:root { --brand: #d97706; }
.button { background: var(--brand); }

27. What is the difference between a transition and an animation?

A transition animates a property from one state to another when it changes (for example on :hover), with a start and an end. An animation (@keyframes) can run on its own through many steps and can loop.

28. Which properties are cheap to animate?

transform and opacity, because the browser can handle them on the GPU without recalculating layout. Animating width, height, top or margin forces layout work and can stutter.

Practical and debugging

29. How do you debug CSS?

Open the browser's developer tools, inspect the element, read the Styles pane to see which rule wins (struck-through declarations lost), check the computed box model, and toggle properties on and off. Common causes: a typo, a more specific rule, an unclosed brace, or a property that needs a different display.

30. What are some best practices?

Use a consistent naming approach (BEM or similar), keep specificity low, avoid !important, prefer classes to IDs, use rem and relative units, set box-sizing: border-box, design mobile-first, respect prefers-reduced-motion, and keep colour contrast high enough to read.

A mini-test

Try to answer without looking things up: Why does an absolutely positioned child sit at the page corner instead of its parent's corner? (The parent is not positioned.) Why does z-index: 9999 fail? (Wrong stacking context, or the element is not positioned.) Why is a 100% wide box with padding overflowing? (Content-box sizing.)

Prepare further

Practise by rebuilding a landing page from a blank file. The 30-day HTML and CSS plan gives a schedule, the Flexbox and Grid cheat sheets are quick references, and CSS certificate: how the final exam works lists the topics the course exam covers. The HTML interview questions cover the markup side. Pick colours from a photo with the Image Color Picker when you practise.