CSS Interview Questions

Master the most common CSS questions asked in job interviews with detailed explanations and examples.

Getting ready for a CSS interview? These questions cover everything from basic selectors to advanced layout techniques. Each answer includes practical examples and the reasoning behind correct CSS practices.

Box Model Questions

What is the CSS Box Model?

The box model describes how CSS calculates the total space an element takes up. Every element has four layers: content (text/images), padding (inner spacing), border (outline), and margin (outer spacing).

/* WanderLust booking form input styling */
.booking-input {
  width: 200px;          /* content area */
  padding: 15px;         /* space inside border */
  border: 2px solid #0ea5e9;  /* border thickness */
  margin: 10px;          /* space outside border */
}

/* Total width = 200 + 30 + 4 + 20 = 254px */

What's the difference between box-sizing: border-box and content-box?

The box-sizing property changes how width and height are calculated. With content-box (default), padding and border add to the total size. With border-box, they're included within the width.

/* WanderLust destination cards comparison */
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #f97316;
  /* Total width: 250px */
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #0ea5e9;
  /* Total width: exactly 200px */
}

Specificity Questions

How does CSS specificity work?

Specificity determines which CSS rule applies when multiple rules target the same element. Think of it as a points system: inline styles (1000 points), IDs (100 points), classes (10 points), and elements (1 point).

Higher Specificity
#header .nav-link → 110 points

Lower Specificity
.nav-link → 10 points

Multiple Classes
.header.active → 20 points

Element Only
h1 a → 2 points

What is CSS cascade and inheritance?

The cascade determines which styles apply when rules conflict. Styles "cascade down" from parent to child elements. Some properties like color inherit automatically, while others like margin don't.

/* WanderLust navigation inheritance example */
.navigation {
  color: #0f172a;        /* inherits to child links */
  font-family: Arial;    /* inherits to child links */
  padding: 20px;         /* does NOT inherit */
}

.nav-link {
  /* inherits color and font-family from parent */
  text-decoration: none;
  /* can override inherited values */
  color: #0ea5e9;
}

Layout Questions

What's the difference between display: block, inline, and inline-block?

Block elements take full width and start new lines (like paragraphs). Inline elements flow with text and ignore width/height. Inline-block combines both — flows inline but accepts width/height.

/* WanderLust destination tags with different displays */
.tag-block {
  display: block;        /* full width, new line */
  background: #0ea5e9;
  color: white;
  padding: 8px 12px;
}

.tag-inline {
  display: inline;       /* flows with text, no width */
  background: #f97316;
  color: white;
  padding: 4px 8px;
}

.tag-inline-block {
  display: inline-block;  /* flows inline but has width */
  background: #15803d;
  color: white;
  padding: 8px 12px;
  width: 100px;
}

How do you center an element horizontally and vertically?

There are several methods depending on the layout system. Flexbox is the most straightforward for modern browsers. CSS Grid also works perfectly. Older methods use positioning with transforms.

/* WanderLust modal centering techniques */

/* Method 1: Flexbox (recommended) */
.modal-flexbox {
  display: flex;
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */
  height: 100vh;
}

/* Method 2: CSS Grid */
.modal-grid {
  display: grid;
  place-items: center;        /* both directions */
  height: 100vh;
}

/* Method 3: Absolute positioning */
.modal-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Responsive Design Questions

What are CSS media queries and how do they work?

Media queries let you apply different styles based on device characteristics like screen size, orientation, or resolution. They're essential for responsive design — making websites look good on phones, tablets, and desktops.

/* WanderLust responsive navigation */
.navigation {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

/* Mobile styles - screens smaller than 768px */
@media (max-width: 767px) {
  .navigation {
    flex-direction: column;    /* stack vertically */
    text-align: center;
  }
  
  .nav-link {
    padding: 10px 0;          /* more touch-friendly */
    border-bottom: 1px solid #e2e8f0;
  }
}

/* Desktop styles - screens 768px and larger */
@media (min-width: 768px) {
  .nav-link {
    margin: 0 15px;
  }
}

What's the difference between em, rem, px, and % units?

px are fixed pixels. em scales relative to parent font size. rem scales relative to root font size. % is relative to parent element's size. Choose based on what should scale together.

Unit Comparison

• px: Fixed size — buttons, borders, precise spacing
• em: Scales with parent — nested components
• rem: Scales with root — consistent sizing
• %: Relative to container — responsive layouts

Advanced Questions

What is the CSS float property and why is it less common now?

Float was originally designed to wrap text around images, like in newspapers. Developers used it for layouts before Flexbox and Grid existed. Now it's mainly used for its original purpose — text wrapping around elements.

How do CSS custom properties (variables) work?

CSS custom properties store reusable values with --variable-name syntax. Access them with var(--variable-name). They cascade like regular properties and can be updated with JavaScript.

/* WanderLust color system with CSS variables */
:root {
  --primary-color: #0ea5e9;
  --accent-color: #f97316;
  --text-dark: #0f172a;
  --background-light: #f8fafc;
}

.destination-card {
  background: var(--background-light);
  color: var(--text-dark);
  border: 2px solid var(--primary-color);
}

.book-button {
  background: var(--accent-color);
  color: white;
}

/* Override variables for dark theme */
.dark-theme {
  --text-dark: #f8fafc;
  --background-light: #0f172a;
}

What causes layout reflow and how can you avoid it?

Reflow happens when the browser recalculates element positions and sizes. It's triggered by changes to width, height, margin, or display properties. Avoid it by animating transform and opacity instead of layout properties.

Performance Impact

Reflow is expensive because the browser must recalculate every affected element's position. On complex pages with many elements, this can cause noticeable performance drops and janky animations.

Quiz

Up Next: CSS Real-World Use Cases

Explore how major companies solve complex design challenges with advanced CSS techniques and optimization strategies.

← Previous Course Index Next →