CSS Interview Questions — Part 1

Top 15 CSS Interview Questions (With Answers)

Q1: Explain the Cascade. How does the browser resolve conflicts?

Answer: The cascade resolves conflicts using this priority order (highest to lowest):

1. !important declarations
2. Inline styles (style="")
3. ID selectors (#id)
4. Class / Attribute / Pseudo-class selectors (.class, [attr], :hover)
5. Element / Pseudo-element selectors (div, ::before)
6. Universal selector (*)

If specificity is equal, the last rule in source order wins.

Q2: What is Specificity? Rank these: ID, Class, Inline Style, Tag.

Answer: Inline Style (1000) > ID (100) > Class (10) > Tag (1). Specificity is calculated as a 4-part tuple: (inline, ids, classes, elements).

Q3: What is the difference between flex-basis, flex-grow, and flex-shrink?

Answer:

• flex-basis: The starting size before grow/shrink (like width)
• flex-grow: How much extra space to absorb (ratio). Default 0 = don't grow.
• flex-shrink: How much to shrink when space is tight (ratio). Default 1 = shrink equally.

Q4: Explain the "Stacking Context." Why doesn't z-index work on some elements?

Answer: A stacking context is like a sealed layer. Z-index only works within its stacking context. Common traps: opacity < 1, transform, and filter all create new stacking contexts, trapping child z-index values.

Q5: How does box-sizing: border-box change the box model?

Answer: With content-box (default), width only sets the content width. Padding and border are added on top. With border-box, width includes content + padding + border. This makes sizing predictable.

Q6: display: none vs visibility: hidden?

Property	Visual	Takes Space?	Accessible?	Triggers Reflow?
display: none	Hidden	❌ No	❌ Hidden from screen readers	✅ Yes
visibility: hidden	Hidden	✅ Yes (space preserved)	❌ Hidden from screen readers	❌ No (repaint only)
opacity: 0	Hidden	✅ Yes	✅ Still accessible	❌ No

Q7: What are CSS Variables? Can they be accessed in JavaScript?

Answer: Yes! CSS Custom Properties are runtime variables that cascade and inherit. JS access:

// Read
getComputedStyle(document.documentElement).getPropertyValue('--primary');
// Write  
document.documentElement.style.setProperty('--primary', 'blue');

Q8: px vs em vs rem?

Unit	Relative To	Accessibility
px	Fixed screen pixel	❌ Doesn't scale with user settings
em	Parent element font-size	✅ Scales, but compounds in nesting
rem	Root element font-size	✅ Scales consistently

Q9: Is "Clearfix" still relevant?

Answer: No. Clearfix was needed to contain floated children. Modern alternatives: display: flow-root on the parent, or just use Flexbox/Grid which don't need clearfix.

Q10: Explain grid-template-areas

Answer: It lets you define a grid layout with named areas using ASCII art syntax, making complex layouts readable:

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

Q11: What is :has() and why is it a game-changer?

Answer: :has() is the "parent selector" — it selects an element based on its children/descendants. Example: form:has(:invalid) { border-color: red; } styles the form when any input is invalid. Before :has(), this required JavaScript.

Q12: How do you center a div? (3+ ways)

Answer:

1. Flexbox: display: flex; justify-content: center; align-items: center;
2. Grid: display: grid; place-items: center;
3. Absolute + Transform: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
4. Margin auto on flex child: margin: auto;

Q13: position values explained

Value	Relative To	In Normal Flow?
static	Default, no positioning	✅ Yes
relative	Its original position	✅ Yes (space preserved)
absolute	Nearest positioned ancestor	❌ No
fixed	Viewport	❌ No
sticky	Scroll position threshold	✅ Yes (until stuck)

Q14: How does CSS affect the Critical Rendering Path?

Answer: CSS is render-blocking. The browser won't paint anything until all CSS is downloaded and parsed (CSSOM built). This is why critical CSS should be inlined and non-critical CSS loaded asynchronously.

Q15: How do you implement Dark Mode?

Answer: Define colors as CSS variables. Swap variables using @media (prefers-color-scheme: dark) for system preference, and a [data-theme="dark"] attribute for manual toggle. Store user preference in localStorage.