🎨

Intermediate

12 min read

CSS Interview Questions

CSS concepts, Flexbox, Grid, and responsive design questions

Essential CSS Interview Questions

Master CSS concepts commonly asked in frontend interviews. This guide covers Flexbox, Grid, positioning, specificity, animations, and modern CSS techniques.

1. Explain CSS Box Model

The CSS box model describes how elements are structured and sized. Every element is a rectangular box with four areas:

Content: The actual content (text, images, etc.)
Padding: Space between content and border
Border: Border around the padding
Margin: Space outside the border

.box {
  /* Content box (default) */
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  /* Total width = 300 + 40 + 10 = 350px */
}

.box-border {
  /* Border box (recommended) */
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Total width = 300px (includes padding and border) */
}

Best Practice: Use box-sizing: border-box globally for more predictable sizing.

*, *::before, *::after {
  box-sizing: border-box;
}

2. Explain CSS Specificity

Specificity determines which CSS rule applies when multiple rules target the same element. It's calculated based on selector types:

Inline styles: 1000 points
IDs: 100 points
Classes, attributes, pseudo-classes: 10 points
Elements, pseudo-elements: 1 point

/* Specificity: 1 (element) */
p { color: red; }

/* Specificity: 10 (class) */
.text { color: blue; }

/* Specificity: 100 (ID) */
#title { color: green; }

/* Specificity: 111 (ID + class + element) */
#header .nav a { color: purple; }

/* Specificity: 20 (two classes) */
.container .text { color: orange; }

/* !important overrides everything (avoid if possible) */
p { color: yellow !important; }

3. Flexbox Layout - Key Concepts

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Container Properties:

.container {
  display: flex;
  
  /* Direction */
  flex-direction: row | row-reverse | column | column-reverse;
  
  /* Wrapping */
  flex-wrap: nowrap | wrap | wrap-reverse;
  
  /* Shorthand */
  flex-flow: row wrap;
  
  /* Main axis alignment */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  
  /* Cross axis alignment */
  align-items: flex-start | flex-end | center | baseline | stretch;
  
  /* Multi-line alignment */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  
  /* Gap between items */
  gap: 20px;
}

Item Properties:

.item {
  /* Growth factor */
  flex-grow: 1;
  
  /* Shrink factor */
  flex-shrink: 1;
  
  /* Base size */
  flex-basis: 200px;
  
  /* Shorthand: grow shrink basis */
  flex: 1 1 200px;
  
  /* Individual alignment */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  
  /* Order */
  order: 2;
}

Common Flexbox Pattern - Centered Content:

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

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

.equal-columns {
  display: flex;
  gap: 20px;
}

.equal-columns > * {
  flex: 1; /* All children take equal space */
}

4. CSS Grid Layout - Key Concepts

Grid is a two-dimensional layout system for creating complex layouts with rows and columns.

.grid-container {
  display: grid;
  
  /* Define columns */
  grid-template-columns: 200px 1fr 2fr;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
  
  /* Define rows */
  grid-template-rows: 100px auto 200px;
  
  /* Gap */
  gap: 20px;
  column-gap: 30px;
  row-gap: 15px;
  
  /* Alignment */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
  align-content: start | end | center | stretch | space-between | space-around | space-evenly;
}

/* Grid item placement */
.grid-item {
  /* Span columns */
  grid-column: 1 / 3; /* Start at column 1, end before column 3 */
  grid-column: span 2; /* Span 2 columns */
  
  /* Span rows */
  grid-row: 1 / 3;
  grid-row: span 2;
  
  /* Shorthand */
  grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
}

Grid Template Areas (Named Grid):

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

5. CSS Position Property

/* Static (default) - normal flow */
.static {
  position: static;
}

/* Relative - positioned relative to normal position */
.relative {
  position: relative;
  top: 20px;
  left: 30px;
  /* Original space is preserved */
}

/* Absolute - positioned relative to nearest positioned ancestor */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
  /* Removed from normal flow */
}

/* Fixed - positioned relative to viewport */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* Stays in place when scrolling */
}

/* Sticky - toggles between relative and fixed */
.sticky {
  position: sticky;
  top: 0;
  /* Sticks to top when scrolling past it */
}

6. CSS Animations and Transitions

Transitions:

.button {
  background: blue;
  transition: background 0.3s ease;
  /* property duration timing-function delay */
}

.button:hover {
  background: red;
}

/* Multiple properties */
.card {
  transition: transform 0.3s ease, 
              box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Keyframe Animations:

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: fadeIn 0.5s ease-out;
}

/* Multiple keyframes */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bouncing {
  animation: bounce 1s infinite;
  /* name duration timing-function iteration-count */
}

7. Responsive Design Techniques

Media Queries:

/* Mobile first approach */
.container {
  width: 100%;
  padding: 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

/* Large desktop */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none;
  }
}

Fluid Typography:

/* Using clamp() */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* min, preferred, max */
}

/* Using calc() */
p {
  font-size: calc(16px + 0.5vw);
}

8. CSS Variables (Custom Properties)

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

.button {
  background: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  font-size: var(--font-size-base);
}

/* Fallback value */
.text {
  color: var(--text-color, #333);
}

/* Update variables with JavaScript */
/* document.documentElement.style.setProperty('--primary-color', '#e74c3c'); */

9. CSS Pseudo-classes and Pseudo-elements

Pseudo-classes (single colon):

/* User interaction */
a:hover { color: red; }
a:active { color: blue; }
a:focus { outline: 2px solid orange; }

/* Form states */
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
input:valid { border-color: green; }
input:invalid { border-color: red; }

/* Structural */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(3n) { color: red; } /* Every 3rd */
p:not(.special) { color: gray; }

/* Empty */
div:empty { display: none; }

Pseudo-elements (double colon):

/* Before and After */
.button::before {
  content: "→ ";
  margin-right: 5px;
}

.button::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: blue;
}

/* First letter/line */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

p::first-line {
  color: blue;
}

/* Selection */
::selection {
  background: yellow;
  color: black;
}

/* Placeholder */
input::placeholder {
  color: #999;
  opacity: 1;
}

10. CSS Specificity Battle - What Color Will the Text Be?

<div id="container" class="wrapper">
  <p class="text special">What color am I?</p>
</div>

p { color: red; } /* Specificity: 0,0,0,1 */
.text { color: blue; } /* Specificity: 0,0,1,0 */
.wrapper .text { color: green; } /* Specificity: 0,0,2,0 */
#container p { color: orange; } /* Specificity: 0,1,0,1 */
#container .text { color: purple; } /* Specificity: 0,1,1,0 - WINNER */
div p { color: yellow; } /* Specificity: 0,0,0,2 */

Answer: Purple - highest specificity (0,1,1,0)

Key Interview Takeaways:

Always use box-sizing: border-box for predictable layouts
Flexbox for one-dimensional layouts, Grid for two-dimensional
Understand specificity to avoid !important overuse
Use CSS variables for maintainable, themeable code
Mobile-first responsive design with media queries
Position: sticky for sticky headers, fixed for modals/tooltips
Pseudo-classes for state, pseudo-elements for content