Preparing for CSS-Specific Interview Questions

If you’re reading this, you might have a front-end interview soon, possibly one focusing on CSS, or you’re preparing for CSS-related interviews. Depending on the role, you likely won’t be asked only about CSS; expect questions on HTML, CSS, and JavaScript.

This article focuses on 10 CSS questions you might face in front-end interviews, even if mixed with HTML or JavaScript. These questions are based on my experience as the founder of frontendlead.com, a platform helping front-end engineers prepare for tech interviews. With over 13 years as a software engineer, I’ve been part of hundreds of interviews.

The questions vary in difficulty. We’ll start with the easiest and progress to the hardest.

| # | Interview Question | Difficulty |
|—|——————-|————|
| 1 | How would you go about building a responsive website? | Easy |
| 2 | What are CSS preprocessors, and why are they useful? | Easy |
| 3 | How would you make fonts responsive in CSS? | Easy |
| 4 | Describe `z-index` and how stacking context is formed. | Medium |
| 5 | What’s the difference between `block`, `inline`, and `inline-block`? | Medium |
| 6 | What does `* { box-sizing: border-box; }` do? | Medium |
| 7 | How would you go about making an image responsive in CSS? | Medium |
| 8 | How would you make CSS more performant? | Hard |
| 9 | What are the pros and cons of CSS in JS vs external CSS import, and which would you choose? | Hard |
| 10 | Can you build this layout in CSS? | Hard |

Before diving in, note that there are multiple correct ways to answer these questions. The guidance here is to help you approach the types of questions you may face. Actual questions may require more elaboration or specific examples demonstrating your understanding of different concepts.

1. **How would you go about building a responsive website? (Easy)**

Responsive design is fundamental. It means your layout, images, and typography adapt to any device or screen size. Tools for responsive design include relative units (`%`, `em`, `rem`), media queries, and fluid layouts. A “mobile-first” approach is often expected, where base styles are for mobile devices and scale up for larger screens.

Example with media queries:

“`css
.container {
max-width: 1200px;
margin: 0 auto;
padding: 16px;
}

img {
max-width: 100%;
height: auto;
display: block;
}

@media (max-width: 600px) {
.container {
padding: 8px;
}
}
“`

Mention handling navigation and images on mobile (collapsing menus, responsive image techniques) and testing layouts using browser Developer Tools.

2. **What are CSS preprocessors, and why are they useful? (Easy)**

CSS preprocessors like Sass, Less, and Stylus make managing large CSS codebases easier by adding features not in vanilla CSS, like mixins and functions. These features help reuse patterns and generate code based on parameters. Here’s a Sass example:

“`scss
@mixin shadow($opacity: 0.12) {
box-shadow: 0 2px 8px 0 rgba(24, 39, 75, $opacity);
}

@function space($multiplier: 1) {
@return $multiplier * 8px;
}

%btn-base {
display: inline-block;
font-size: $font-size-lg;
border-radius: 6px;
text-align: center;
cursor: pointer;
}

.button {
@extend %btn-base;
background: $primary;
color: #fff;
padding: space(1.5) space(3);
@include shadow(0.15);

&:hover {
background: lighten($primary, 10%);
}

&.secondary {
background: $secondary;
color: #23272f;
border: 2px solid $secondary;
}

@media (max-width: 600px) {
padding: space(1) space(2);
font-size: 1rem;
}
}
“`

Preprocessors keep code DRY and simplify refactoring. While CSS now has variables, preprocessors remain popular for advanced features. Modern CSS supports nesting and functions, with custom functions planned for Chrome 139.

3. **How would you make fonts responsive in CSS? (Easy)**

Font sizing affects design and accessibility. Responsive fonts adjust to screen size, ensuring readability. Use relative units (`em`, `rem`) and newer CSS features like `clamp()` and viewport units (`vw`, `vh`). Media queries can step up font sizes for larger