CSS Interview Prep

Core concepts

1. What does CSS specificity mean and how is it calculated?

Specificity decides which rule wins when several target the same element. It is scored by counting inline styles, then ids, then classes/attributes/pseudo-classes, then elements/pseudo-elements. A higher-weight selector beats a lower one; ties are broken by source order. Inline styles beat ids, which beat classes, which beat element selectors.

2. Explain the CSS box model.

Every element is a rectangular box made of four layers from the inside out: content, padding (space inside the border), border, and margin (space outside the border). The total rendered size depends on box-sizing: with content-box, width applies to content only; with border-box, width includes padding and border.

3. What is the difference between margin and padding?

Padding is space inside an element, between its content and its border, and it takes the element's background. Margin is space outside the border that separates the element from its neighbours and is always transparent. Vertical margins between block elements can collapse; padding never collapses.

4. Explain the position property values.

static is the default (normal flow). relative offsets an element from its normal position while still reserving its space. absolute removes it from flow and positions it relative to the nearest positioned ancestor. fixed positions relative to the viewport and stays put on scroll. sticky toggles between relative and fixed based on scroll position.

5. When would you use Flexbox versus Grid?

Flexbox is one-dimensional — it lays items out in a single row or column and is ideal for navbars, toolbars and distributing space along one axis. Grid is two-dimensional — it controls rows and columns together and is best for page-level layouts and complex arrangements. They compose well: a grid cell can itself be a flex container.

6. What is the difference between rem and em units?

Both are relative font-size units. em is relative to the font size of the element itself (or its parent for inherited contexts), so it compounds when nested. rem is always relative to the root (html) font size, so it stays predictable regardless of nesting. Use rem for consistent spacing and type scales; use em when you want sizing to scale with a component's own font size.

7. Pseudo-class vs pseudo-element — what's the difference?

A pseudo-class (single colon, e.g. :hover, :focus, :nth-child) targets an element in a particular state or position. A pseudo-element (double colon, e.g. ::before, ::after, ::first-line) styles or creates a specific part of an element, such as generated content or the first line of text.

8. How does z-index work?

z-index controls stacking order along the z-axis for positioned elements (and flex/grid items). Higher values sit in front. Crucially, z-index only compares elements within the same stacking context — a child can never appear above an element outside its parent's context, no matter how high its z-index.

9. What is a Block Formatting Context (BFC)?

A BFC is an isolated region of the page where block boxes lay out independently. It contains floats, prevents margin collapse across its boundary, and stops content wrapping around floats. You trigger one with overflow: hidden or auto, display: flow-root, floats, or absolute positioning. flow-root is the cleanest way to create one deliberately.

Layout and responsiveness

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

display: none removes the element from the layout entirely — it takes up no space and is not read by most assistive tech. visibility: hidden keeps the element's space reserved but makes it invisible. opacity: 0 also hides it visually but keeps it interactive and in flow.

11. Explain the CSS cascade and inheritance.

The cascade resolves conflicts using origin and importance, then specificity, then source order. Inheritance is separate: some properties (like color and font-family) pass from parent to child by default, while others (like margin and border) do not. You can force inheritance with the inherit keyword.

12. What are media queries and mobile-first design?

Media queries apply CSS conditionally based on viewport size or device features, for example @media (min-width: 768px). Mobile-first means writing the base styles for small screens, then layering enhancements with min-width queries as the screen grows. It keeps CSS simpler and performance better on phones.

13. How do you center a div horizontally and vertically?

The modern answer is a flex or grid container: display: grid; place-items: center; centers a child both ways. With flexbox, set display: flex; align-items: center; justify-content: center;. For a fixed-size element you can also use absolute positioning with top/left 50% and translate(-50%, -50%).

14. What is the difference between absolute and relative units?

Absolute units (px, cm, pt) are fixed and do not scale with context. Relative units (%, em, rem, vw, vh, ch) scale with something else — the parent, the root font size, or the viewport — making them essential for responsive, accessible designs.

Practical and quick-fire

15. What does box-sizing: border-box do and why use it?

It makes an element's declared width and height include padding and border, not just content. This makes sizing predictable — a 200px box stays 200px even after you add padding — which is why many developers apply it globally with the universal selector.

16. How do CSS transitions differ from animations?

A transition animates a property smoothly between two states, usually triggered by a change like :hover. An animation uses @keyframes to define multiple steps and can run automatically, loop, and play without any trigger. Use transitions for simple state changes and animations for multi-step or looping motion.

17. What are CSS custom properties (variables)?

Custom properties are user-defined values declared with a double-dash name (--brand: #0f766e) and read with var(--brand). Unlike SASS variables they live at runtime, cascade and inherit, and can be changed with JavaScript or media queries — perfect for theming and dark mode.

18. How would you improve CSS performance and maintainability?

Keep selectors shallow and avoid deep nesting, use a naming convention like BEM, reuse values through custom properties, prefer transform and opacity for animations (they are GPU-friendly), minimise expensive layout thrash, and remove unused CSS. Organised, predictable CSS is easier for teams to maintain and faster for browsers to render.