CSS Interview Questions

Introduction

CSS interviews focus on understanding how styles work internally, layout debugging, and modern best practices. This chapter covers frequently asked questions for developers of all levels.

CSS Fundamentals

1. What is the Box Model?

It consists of Content, Padding, Border, and Margin. It defines how elements take up space.

2. What is Specificity?

It decides which CSS rule matches an element. The hierarchy is: Inline > ID > Class > Tag.

3. display: none vs visibility: hidden?

• display: none removes the element from the layout.
• visibility: hidden hides it but keeps the space occupied.

4. Flexbox vs Grid?

Flexbox is 1D (rows or columns). Grid is 2D (rows and columns). Use Flexbox for components, Grid for layout.

Modern CSS Questions

5. What are CSS Variables?

Custom properties (--color: red;) used for theming and reusability.

6. What is the z-index?

Controls the vertical stacking of positioned elements. Works only with position: relative/absolute/fixed.

7. What are Pseudo-classes?

Selectors that define a state (e.g., :hover, :focus, :nth-child).

Debugging & Optimization

8. How do you center a div?

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

9. Best way to boost CSS performance?

• Minify CSS files
• Reduce specificity and nesting
• Use transform/opacity for animations