CSS Interview Questions
CSS comes up in nearly every front-end and full-stack interview, from junior to senior roles. These are the questions interviewers actually ask, with concise answers you can speak confidently.
17 questions with concise, interview-ready answers.
1. What is the CSS box model?
Every element is a rectangular box made up of four layers: the content, then padding around it, then a border, then a margin outside that. The total space an element occupies is the sum of those layers. By default the width and height you set apply only to the content area, but you can change that behavior with the box-sizing property.
2. What is the difference between box-sizing: content-box and border-box?
With content-box, the default, the width and height you set apply only to the content, so any padding and border are added on top, making the element render wider than the value you specified. With border-box, the width and height include the content, padding, and border, so the element stays the size you set. Many developers apply box-sizing: border-box globally because it makes layouts far easier to reason about.
3. How does CSS specificity work?
Specificity decides which rule wins when multiple rules target the same element. It is calculated from the selectors used, ranked roughly as inline styles highest, then IDs, then classes, attributes, and pseudo-classes, then element and pseudo-element selectors lowest. A more specific selector beats a less specific one regardless of source order, and an !important declaration overrides normal specificity altogether.
4. What is the difference between a class selector and an ID selector?
A class selector, written with a dot like .button, can be reused on many elements and is the standard way to style components. An ID selector, written with a hash like #header, targets a single element because an ID must be unique on the page. IDs have higher specificity than classes, which is one reason most teams prefer classes for styling to keep specificity manageable.
5. What are the values of the CSS position property?
Static is the default, where elements follow normal document flow. Relative positions an element relative to its normal position and creates a reference for absolutely positioned children. Absolute removes the element from flow and positions it relative to its nearest positioned ancestor. Fixed positions relative to the viewport so it stays in place when scrolling, and sticky behaves like relative until a scroll threshold is reached, then sticks like fixed.
6. What is the difference between display: block, inline, and inline-block?
Block elements start on a new line and take up the full available width, and you can set their width and height — examples are div and p. Inline elements flow within text, take only as much width as their content, and ignore width, height, and top/bottom margins — examples are span and a. Inline-block flows inline alongside other content but still respects width, height, and vertical padding and margins, giving you the best of both.
7. What is Flexbox and when would you use it?
Flexbox is a one-dimensional layout system for arranging items in a single row or column. You make a container a flex container with display: flex, then control alignment and spacing with properties like justify-content along the main axis and align-items along the cross axis. It is ideal for navigation bars, toolbars, centering content, and distributing space between items.
8. What is CSS Grid and how does it differ from Flexbox?
CSS Grid is a two-dimensional layout system that lets you control both rows and columns at the same time, which makes it well suited to overall page layouts. Flexbox is one-dimensional, handling a single row or column at a time, which makes it better for components and content that flows. They are not mutually exclusive — a common pattern is to use Grid for the page structure and Flexbox for the components inside it.
9. What is the difference between em and rem units?
Both are relative font-size units. An em is relative to the font size of the element it is used on (or the parent for properties like font-size), so nested ems can compound and become hard to predict. A rem is relative to the root element font size, the html element, so it stays consistent no matter how deeply nested the element is. Many developers prefer rem for predictable, scalable sizing and reserve em for spacing that should scale with local text.
10. What is the difference between pseudo-classes and pseudo-elements?
A pseudo-class targets an element in a particular state or position, such as :hover, :focus, or :nth-child, and is written with a single colon. A pseudo-element targets and styles a specific part of an element or inserts generated content, such as ::before, ::after, or ::first-line, and is written with double colons in modern CSS. In short, pseudo-classes select based on state while pseudo-elements style a sub-part of the element.
11. What is z-index and a stacking context?
The z-index property controls the stacking order of positioned elements along the z-axis, where a higher value sits in front of a lower one. It only works on elements that have a position value other than static, or on flex and grid items. A stacking context is a self-contained layer, created by things like a positioned element with a z-index, or properties like opacity less than 1 or a transform — z-index values only compete within the same stacking context, which is why a high z-index sometimes appears not to work.
12. What is responsive design and how do media queries help?
Responsive design means a layout adapts to different screen sizes and devices so it looks good everywhere. Media queries are the core tool, using @media to apply CSS only when conditions are met, such as a maximum or minimum viewport width. Combined with flexible units, fluid grids, and the viewport meta tag, they let one codebase serve phones, tablets, and desktops.
13. What is the difference between min-width and max-width media queries?
A min-width media query applies its styles when the viewport is at or above the given width, which is the foundation of a mobile-first approach where you start with the small-screen layout and add styles as the screen grows. A max-width media query applies when the viewport is at or below a width, used in a desktop-first approach where you override styles as the screen shrinks. Mobile-first with min-width is the more common modern convention.
14. What are CSS custom properties (variables) and how do you use them?
CSS custom properties let you store reusable values like colors or spacing in a variable. You define one with a double-dash name, for example --primary: #007bff, usually on the :root selector, and reference it with the var function like color: var(--primary). Unlike preprocessor variables they are live in the browser, inherit through the cascade, and can be read and changed at runtime with JavaScript.
15. What is the difference between transitions and animations in CSS?
A transition animates a property smoothly between two states and needs a trigger, such as a hover or a class change, so it runs once from start to end. An animation uses @keyframes to define multiple steps and can run automatically, loop, reverse, and pause without any trigger. Use a transition for simple state changes like a button hover, and an animation for multi-step, looping, or self-starting motion.
16. What is the BEM naming convention?
BEM stands for Block, Element, Modifier and is a naming methodology for writing predictable, maintainable class names. A block is a standalone component like .card, an element is a part of that block written with two underscores like .card__title, and a modifier is a variant written with two dashes like .card--featured. It keeps specificity low and flat by relying on classes, and makes the relationship between markup and styles easy to read.
17. What is the difference between visibility: hidden and display: none?
With display: none the element is removed from the layout entirely, so it takes up no space and is not rendered. With visibility: hidden the element is invisible but still occupies its space in the layout, leaving a gap where it would have been. Another option, opacity: 0, also keeps the space and, unlike the other two, leaves the element interactive and able to receive clicks.
Get these answered live in your real interview
NostrobeAI is a real-time AI interview copilot — it hears the question and drafts a strong answer on your screen, invisible on Zoom, Meet, and Teams. One-time pricing, no subscription.
Try NostrobeAI free