Top CSS Interview Questions and Answers

Are you a CSS developer trying to join a top company, or a recruiter searching for a skilled CSS professional to add to your team? You're in the right place. This collection of CSS interview questions and answers is here to help developers get ready for interviews and help recruiters find the right match.

Basic CSS Interview Questions for Freshers

How would you describe CSS to someone who’s never used it before?

CSS is a language used to style websites. You can set colours, fonts and change website layout with the help of CSS.

Why is the word “cascading” very important in CSS?

When there are conflicting styles on an HTML element, CSS decides which one to go for. This is done based on importance, specificity and the CSS order. This deciding approach is what is called “Cascading”.

What is the CSS “ruleset” for isolating elements and giving them attributes?

A CSS ruleset has a selector and a declaration block. For the selector, you can set a property and a value required for the property.

Do you know the difference between margin and padding?

Margin refers to the area outside an HTML element, creating space between the element and others around it. Padding, on the other hand, is the space between the content of the element and its border.

What is the difference between inline, block, and inline-block elements in HTML?

Inline elements flow with text, no line break (e.g., <span>). Block elements take full width, start on a new line (e.g., <div>).

Inline-block elements are similar to inline elements, but you can set the width and height.

What are pseudo-classes and pseudo-elements in CSS?

Pseudo-classes are used to style an element when it’s in a certain state.
Style an element when you hover over it. :hover
Target the first element inside a parent. :first-child

Pseudo-elements are the style parts of an element
Add content before an element. ::before
Add content after an element. ::after

How do you centre a div horizontally and vertically?

There are multiple approaches.

Using Margin (with Fixed Width and Height)
Using Text-Align and Line-Height (For single-line content)
Using Positioning with transform
Using Grid
Using flexbox

The Grid and Flexbox approaches are the best among these.

How can you add colours to the bullets?

Using list-style-type and color for Custom Bullets

Using Custom Bullets with ::before Pseudo-element

What are raster images and vector images?

Raster images are made up of pixels or tiny colour dots. They might get blurry when you zoom. Common formats are JPEG, PNG, GIF, and BMP.

Vector images are made up of lines, curves, and shapes based on mathematical formulas. They will not compromise the quality even when you resize them. Common formats are SVG, EPS, and PDF.

10.

What are the different approaches to making an image responsive?

Set max-width to 100%
This makes the image scale with its container, preserving aspect ratio.

Use CSS object-fit
Keeps image proportions while fitting it inside a box.

Use a picture element
Allows you to load different images based on screen size:

Use Media Queries
Change image size or style depending on screen width.

Why waste time screening?

Hire expert developers, vetted and ready in 48 hours

Hire now

Intermediate CSS Interview Questions

What is specificity in CSS, and how is it calculated?

When there are multiple CSS styles on an HTML element, specificity decides which rule wins. It's determined using this pattern.
Inline > ID > Class > Element

Here, specificity is as follows. The green colour within the inline style gets priority.

Inline style → 1,0,0,0

ID selector (#main) → 0,1,0,0

Class selector (.text) → 0,0,1,0

Element selector (p) → 0,0,0,1

What is the use of calc() in CSS?

To do calculations directly in styles, you can use the calc() function. It helps to combine various units, such as % and px or adjust sizes dynamically. Calc method is useful to create responsive layouts, adjust spacing without hardcoding values and align items correctly.

What is the difference between em, rem, and px?

px (Pixels): Fixed size. Doesn’t change based on anything else.
em: Relative to the parent element's font size. Changes if the parent’s size changes.
rem: Relative to the root element’s font size (usually <html>). Consistent across the page.

Use px for fixed sizes, em for parent-based scaling, and rem for global, consistent scaling.

How do you handle browser compatibility for CSS features?

Use CSS Prefixes: Add browser-specific prefixes (e.g., -webkit-, -ms-) for older browsers.

Autoprefixer: Use tools like Autoprefixer to automatically add prefixes.
Feature Queries: Use @supports to check if a feature is supported.

Fallbacks: Provide fallback styles for unsupported features.

Can I Use: Check compatibility on Can I Use.

How do you prevent layout shifts in responsive design?

Set Explicit Dimensions: Always set fixed width and height for images, videos, and other media elements.
Use min-width and max-width: Ensure elements scale properly without causing overflow or shifting.
Avoid using auto for Layouts: Use explicit size values to prevent unexpected resizing.
CSS Grid/Flexbox: Use layout techniques like Grid or Flexbox to create stable layouts that adjust without shifting.
Reserve Space for Dynamic Content: Ensure containers have enough space to load dynamic content (e.g., ads, fonts, images) without causing shifts.
Web Fonts with font-display: Use font-display: swap to prevent text shifting when fonts load.

How do you implement a responsive typography system?

To implement a responsive typography system:

Use Relative Units: Use em or rem for font sizes to make them scale based on the parent or root font size.

CSS Media Queries: Adjust font size at different screen widths.

Viewport Units: Use vw or vh for font sizes that scale with the viewport size.

Clamp Function: Use clamp() to set a minimum, preferred, and maximum font size based on the viewport size.

What are keyframe animations, and how do they work?

Keyframe animations can be used to change styles dynamically. By setting the start (0%) and end (100%) states, define keyframes. Use the animation property to control the timing.

Here, the element moves from left to right over 2 seconds.

How do you implement dark mode using CSS?

To implement dark mode in CSS, we can use the prefers-color-scheme media query.

/* Default (light mode) */

/* Dark mode */

It automatically switches based on the user’s system settings.

What is the difference between position: absolute and position: fixed?

Position absolute positions the element relative to the nearest positioned parent element (not the viewport). With fixed position, we can position the element relative to the viewport, staying in place even when scrolling.

10.

What does the flex-grow property do in Flexbox?

The flex-grow defines how much an element should grow relative to other elements in the container when there’s extra space. A higher flex-grow value means the element takes up more available space.

Advanced CSS Interview Questions for Experienced Professionals

How do CSS custom properties (variables) differ from preprocessor variables?

CSS Variables (--var) work in the browser (runtime). We can change with JavaScript. Support inheritance

Preprocessor Variables ($var) work at build time (e.g., in Sass). We can’t change it in the browser. More powerful for logic (like loops, mixins).

What is Critical CSS, and how is it used to optimise performance?

Critical CSS is the CSS required to style the visible content. It helps the page load faster by showing key styles first. We need to extract critical CSS first. Then include it in the <head> of the HTML. Load the rest of the CSS later. Critical CSS improves speed and user experience.

What are CSS Houdini APIs?

CSS Houdini APIs allow developers to extend CSS by writing code that interacts directly with the CSS engine. The APIs are, Paint API, Layout API, and Properties & Values API. Paint API draws custom graphics with JavaScript. Layout API creates custom layout behaviours. Properties & Values APIs define custom CSS properties with types and defaults.

How would you debug CSS layout issues in a large web application?

Use browser DevTools to inspect elements, check the box model, and apply styles.
Check computed styles to see final values after inheritance and overrides.
Toggle CSS properties to turn styles on/off to isolate the issue.
Use outlines like outline: 1px solid red; to see element boundaries.
Check for specificity issues to find conflicting rules that may override your styles.
Remove or comment out CSS parts to narrow down the problem.

How do you use the :has() pseudo-class, and what are its performance implications?

It selects an element based on its children or contents. It's powerful but can be slow on large DOMs. Use carefully and avoid overusing in deep or complex selectors. Great for dynamic styles, but test performance on big pages.

How does @container (container queries) differ from media queries, and when would you use it?

Media Queries trigger styles based on viewport size (e.g., screen width). Container Queries trigger styles based on the parent container size.

How can you implement a theming system using only CSS custom properties?

To implement theming with CSS custom properties, define theme variables in :root for the default theme. Override variables in a .dark class for the dark theme. Use JavaScript to switch the themes.

Example:

What are the limitations of CSS Grid vs. Flexbox?

CSS Grid is the best for 2D layouts (rows & columns), but doesn't work well with simple layouts. Eg: dashboards

Flexbox is good for 1D layouts (either row or column) but struggles with complex multi-dimensional designs.. Eg. navbars

Explain the difference between nth-child() and:nth-of-type() selectors.

Both :nth-child() and :nth-of-type() are CSS pseudo-class selectors that allow you to target specific elements based on their position in a group of siblings. However, they differ in the way they determine which elements to select.

10.

How case-sensitive is CSS?

CSS is mostly case-insensitive, but with exceptions. Property names and tag names are case-insensitive, but classes, IDs, and custom fonts are case-sensitive.

Property names: Case-insensitive (e.g., background-color, BACKGROUND-COLOR).
HTML tag names: Case-insensitive (div, DIV).
Class and ID selectors: Case-sensitive (.myClass vs .MYCLASS).
Font names: Case-sensitive for custom fonts ("Arial" vs "arial").
Certain values (like color names): Case-insensitive (red vs RED).

We’ve tried to cover a wide range of CSS questions, basic, intermediate, and advanced, to help both developers and recruiters. If you're looking to skip the long hiring process, WAC can help you hire top-tier developers. And if you're an experienced CSS developer aiming to work with top companies, these interview questions are an ideal beginning and feel free to visit our careers page.