Top 50 CSS Interview Questions

📚 50 Questions • 🕑 ~28 min read • Beginner–Advanced

The most-asked CSS interview questions at companies that hire from Anna University — from basic selectors to Flexbox, Grid, animations, and CSS architecture. Questions move from Easy to Medium to Hard.

Basic (Q1–Q20) Intermediate (Q21–Q35) Advanced (Q36–Q50)

Basic CSS Questions

Q1–Q20

Q1What is CSS and what are the three ways to add it to HTML?Easy▼

CSS (Cascading Style Sheets) is a stylesheet language that controls the visual presentation of HTML elements — colors, fonts, layout, spacing, animations.

HTML/CSS

<!-- 1. Inline CSS — directly on the element (lowest priority) -->
<p style="color: red; font-size: 18px;">Text</p>

<!-- 2. Internal CSS — inside <style> in <head> -->
<style>
  p { color: red; }
</style>

<!-- 3. External CSS — separate .css file (BEST PRACTICE) -->
<link rel="stylesheet" href="style.css">

External CSS is preferred because it separates concerns, is cacheable, and one file can style multiple pages.

Q2What is the CSS Box Model?Easy▼

Every HTML element is a rectangular box. The CSS Box Model describes the layers from inside out:

Content — the actual text/image area (width × height)
Padding — transparent space inside the border, between content and border
Border — line around the padding (has width, style, color)
Margin — transparent space outside the border, between this element and its neighbors

CSS

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #6366f1;
  margin: 10px;
}
/* Total space taken = 200 + 20+20 (padding) + 2+2 (border) + 10+10 (margin) = 264px */
/* With box-sizing: border-box, width includes padding+border (= 200px total) */

Q3What is the difference between margin and padding?Easy▼

Padding — space inside the element, between the content and the border. It inherits the element's background color.
Margin — space outside the element, between it and other elements. Always transparent.

CSS

.button {
  padding: 12px 24px;  /* space INSIDE — makes button larger */
  margin: 8px;         /* space OUTSIDE — pushes away from other elements */
  background: blue;    /* padding area will be blue, margin will not */
}

Key difference: adjacent margins collapse (the larger of the two wins). Adjacent paddings never collapse.

Q4What is box-sizing: border-box and why should you use it?Easy▼

By default (content-box), width only counts the content area — padding and border are added on top, making the actual element wider than expected.

With border-box, width includes padding and border — so the element is exactly the width you set.

CSS

/* Apply to all elements (recommended in every project) */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #ccc;
  /* content-box: actual width = 300+40+4 = 344px */
  /* border-box:  actual width = 300px (padding+border INSIDE) */
}

Q5What is the difference between display: block, inline, and inline-block?Easy▼

block — takes full width, starts on new line, respects width/height (e.g. <div>, <p>)
inline — flows with text, ignores width/height, no new line (e.g. <span>, <a>)
inline-block — flows inline like text BUT respects width/height and padding. Best of both worlds.

CSS

.nav-link {
  display: inline-block; /* flows horizontally, but accepts width/height/padding */
  padding: 8px 16px;
  width: 120px;
}

Q6What is the difference between display: none and visibility: hidden?Easy▼

display: none — removes the element from the layout completely. It takes up no space. Other elements fill in as if it doesn't exist.
visibility: hidden — hides the element visually, but it still occupies its space in the layout (like an invisible ghost).
opacity: 0 — also hides visually + keeps space, but the element is still clickable.

CSS

.hidden-none    { display: none; }        /* gone, no space */
.hidden-invis   { visibility: hidden; }   /* invisible, space preserved */
.hidden-opacity { opacity: 0; }           /* invisible + clickable, space preserved */

Q7What is CSS specificity? How is it calculated?Easy▼

Specificity determines which CSS rule wins when multiple rules target the same element. It's calculated as a 4-part score:

Inline styles — (1, 0, 0, 0) — highest
ID selectors (#id) — (0, 1, 0, 0)
Class, attribute, pseudo-class (.class, [type], :hover) — (0, 0, 1, 0)
Element, pseudo-element (div, ::before) — (0, 0, 0, 1) — lowest

CSS

p             { color: black; }  /* (0,0,0,1) */
.text         { color: blue;  }  /* (0,0,1,0) — wins over p */
#main         { color: green; }  /* (0,1,0,0) — wins over .text */
              /* style="color:red" = (1,0,0,0) — wins over #main */

Higher score wins. !important overrides everything but should be used sparingly.

Q8What are CSS pseudo-classes and pseudo-elements?Easy▼

Pseudo-classes target elements in a particular state (colon prefix):

CSS

a:hover    { color: purple; }     /* mouse is over the link */
a:visited  { color: gray; }       /* link was already clicked */
input:focus{ outline: 2px solid; }/* element has keyboard focus */
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #f0f0f0; }

Pseudo-elements target a part of an element (double colon):

CSS

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

/* ::before and ::after: inject content */
.required::after {
  content: " *";
  color: red;
}

Q9What are the different CSS position values?Easy▼

static (default) — normal flow, top/left/right/bottom/z-index have no effect
relative — positioned relative to its own normal position; other elements aren't affected
absolute — removed from flow, positioned relative to the nearest positioned ancestor (non-static)
fixed — removed from flow, positioned relative to the viewport (stays on screen when scrolling)
sticky — acts like relative until it hits a scroll threshold, then becomes fixed

CSS

.tooltip   { position: absolute; top: -30px; left: 0; }
.header    { position: fixed; top: 0; width: 100%; }
.sidebar-link { position: sticky; top: 20px; } /* sticks when scrolling */

Q10What is z-index and when does it work?Easy▼

z-index controls the stacking order of overlapping elements. Higher value = in front of lower value.

Important: z-index only works on elements with position set to anything other than static.

CSS

.modal-overlay { position: fixed; z-index: 1000; }
.modal-content { position: relative; z-index: 1001; } /* above overlay */
.tooltip       { position: absolute; z-index: 100; }

/* z-index has NO effect on: */
.normal-div { z-index: 999; } /* position is static — z-index ignored */

Q11What is the difference between px, em, rem, %, vw, and vh?Easy▼

px — absolute pixels. Fixed size, doesn't scale with user preferences.
em — relative to the parent element's font-size. 1em = parent's font-size. Compounds (nesting multiplies).
rem — relative to the root element's (<html>) font-size. 1rem = 16px by default. Doesn't compound. Best for font sizes and spacing.
% — relative to the parent's dimension.
vw / vh — 1vw = 1% of viewport width. 1vh = 1% of viewport height. Great for full-screen sections.

CSS

html { font-size: 16px; }
h1   { font-size: 2rem; }    /* 32px — always relative to html */
.card{ padding: 1.5rem; }    /* 24px */
.hero{ height: 100vh; }      /* full viewport height */
.col { width: 50%; }         /* half the parent's width */

Q12What are CSS combinators?Easy▼

CSS

/* Descendant (space): any level deep */
.nav a { color: white; }

/* Child (>): direct children only */
.nav > li { display: inline-block; }

/* Adjacent sibling (+): immediately following sibling */
h2 + p { margin-top: 0; }

/* General sibling (~): all following siblings */
h2 ~ p { color: gray; }

Q13What are CSS variables (custom properties)?Easy▼

CSS variables store reusable values defined with -- prefix and accessed with var(). They are live — change once, updates everywhere.

CSS

/* Define on :root (global scope) */
:root {
  --primary: #6366f1;
  --text: #f4f4f5;
  --radius: 8px;
  --spacing-md: 1.5rem;
}

/* Use anywhere */
.button {
  background: var(--primary);
  border-radius: var(--radius);
  padding: var(--spacing-md);
}

/* Override locally */
.danger-btn {
  --primary: #ef4444;
}

Unlike SASS variables, CSS variables can be changed by JavaScript and respond to media queries.

Q14What is CSS overflow?Easy▼

overflow controls what happens when content is too large for its container.

CSS

.container { width: 300px; height: 200px; }

.container { overflow: visible; } /* default: content spills out */
.container { overflow: hidden;  } /* clips content at the boundary */
.container { overflow: scroll;  } /* always shows scrollbars */
.container { overflow: auto;    } /* scrollbars only when needed */

/* Control horizontal and vertical separately */
.code { overflow-x: auto; overflow-y: hidden; }

Q15What is the float property and how do you clear it?Easy▼

float takes an element out of normal flow and pushes it to the left or right, letting text wrap around it. Historically used for layouts (now replaced by Flexbox/Grid).

CSS

.image { float: left; margin-right: 16px; }

/* Clearfix: prevent parent collapsing when children are floated */
.parent::after {
  content: '';
  display: block;
  clear: both;
}

/* Or use overflow: hidden on parent */
.parent { overflow: hidden; }

Q16What is the :root pseudo-class?Easy▼

:root targets the root element of the document — which is always <html>. It has higher specificity than the html selector and is the standard place to declare CSS custom properties (variables) for global scope.

CSS

:root {
  font-size: 16px;
  --brand-color: #6366f1;
  --font-stack: 'Inter', sans-serif;
}

/* :root has slightly higher specificity than html */
html { font-size: 14px; }  /* loses to :root */
:root{ font-size: 16px; }  /* wins */

Q17What is the CSS cascade? How does it decide which rule applies?Easy▼

When multiple rules could apply to the same element, CSS resolves conflicts in this order (highest priority first):

!important declarations
Specificity (inline > ID > class > element)
Source order — later rules override earlier ones (when specificity is equal)
Inheritance — some properties (font, color) inherit from parent if not set

CSS

p { color: black; }            /* specificity: 0,0,0,1 */
.intro { color: blue; }        /* specificity: 0,0,1,0 — wins */
.intro { color: red; }         /* same specificity, but LATER — wins */
p { color: green !important; } /* !important overrides all above */

Q18What is CSS inheritance? Which properties are inherited?Easy▼

Some CSS properties automatically pass down from parent to child elements — this is inheritance.

Inherited properties (mostly text-related): color, font-family, font-size, font-weight, line-height, text-align, letter-spacing, visibility, cursor.

NOT inherited (layout/box-related): margin, padding, border, background, width, height, display, position.

CSS

body { font-family: 'Inter', sans-serif; color: #333; }
/* All text elements inside body inherit these automatically */

/* Force inheritance or reset */
.card { border: inherit; }   /* force inherit */
.card { color: initial; }    /* reset to browser default */
.card { all: unset; }        /* reset all properties */

Q19What is the !important declaration in CSS?Easy▼

!important overrides any other declaration for that property, regardless of specificity or source order. It should be used sparingly — overusing it makes CSS hard to maintain and debug.

CSS

#sidebar { color: blue; }               /* high specificity */
.text    { color: red !important; }     /* wins despite lower specificity */

/* Legitimate uses: */
.visually-hidden {
  position: absolute !important; /* utility class that must always apply */
}

When two declarations have !important, the one with higher specificity wins.

Q20What is the object-fit property?Easy▼

object-fit controls how an <img> or <video> fills its container box — similar to background-size for background images.

CSS

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;    /* fills box, crops if needed (most common) */
  object-fit: contain;  /* fits entire image inside, no crop (may have bars) */
  object-fit: fill;     /* stretches to fill exactly (distorts) */
  object-fit: none;     /* image natural size, may overflow */
  object-position: center top; /* control which part shows */
}

Intermediate CSS Questions

Q21–Q35

Q21What is Flexbox? Explain the main properties.Medium▼

Flexbox is a CSS layout model for arranging items in a single row or column. The parent becomes a "flex container" and its direct children become "flex items".

CSS

/* Parent (flex container) */
.container {
  display: flex;
  flex-direction: row;        /* row | column | row-reverse | column-reverse */
  justify-content: center;    /* align along MAIN axis (x for row) */
  align-items: center;        /* align along CROSS axis (y for row) */
  gap: 16px;                  /* space between items */
  flex-wrap: wrap;            /* allow items to wrap to next line */
}

/* Child (flex item) */
.item {
  flex: 1;           /* grow to fill available space equally */
  flex: 0 0 200px;   /* fixed 200px, don't grow or shrink */
  align-self: flex-start; /* override container's align-items */
}

Q22What is the difference between justify-content and align-items in Flexbox?Medium▼

justify-content — aligns items along the main axis (horizontal when flex-direction: row)
align-items — aligns items along the cross axis (vertical when flex-direction: row)

CSS

.navbar {
  display: flex;
  flex-direction: row;       /* main axis = horizontal */
  justify-content: space-between; /* logo left, nav right */
  align-items: center;       /* vertically centered */
}

/* justify-content values: flex-start | flex-end | center | */
/*   space-between | space-around | space-evenly */
/* align-items values: flex-start | flex-end | center | */
/*   stretch (default) | baseline */

Q23What is CSS Grid? How is it different from Flexbox?Medium▼

Flexbox — one-dimensional (one row OR one column). Best for components: navbars, card rows, button groups.
CSS Grid — two-dimensional (rows AND columns simultaneously). Best for page layouts.

CSS

/* Grid container */
.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr 1fr; /* 3 columns: fixed, flexible, flexible */
  grid-template-rows: auto;
  gap: 24px;
}

/* Responsive grid without media queries */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Item spanning multiple columns/rows */
.hero { grid-column: 1 / -1; } /* full width */
.sidebar { grid-row: 1 / 3; }  /* spans 2 rows */

Q24What are CSS transitions?Medium▼

Transitions animate a property change smoothly from one value to another when triggered by a state change (hover, focus, class change).

CSS

.button {
  background: blue;
  transform: scale(1);
  transition: background 0.3s ease, transform 0.2s ease;
  /* property | duration | timing-function */
}

.button:hover {
  background: purple;   /* animates smoothly over 0.3s */
  transform: scale(1.05); /* animates smoothly over 0.2s */
}

/* Shorthand: transition all properties */
.card { transition: all 0.2s ease; }

Transition timing functions: ease (default), linear, ease-in, ease-out, ease-in-out, cubic-bezier()

Q25What are CSS animations? How do they differ from transitions?Medium▼

Transitions — animate between two states when something changes (needs a trigger like :hover)
Animations — run automatically with full control over keyframes, can loop, pause, reverse

CSS

/* Define keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Apply animation */
.hero {
  animation: fadeIn 0.5s ease forwards;
  /* name | duration | timing | fill-mode */
}

.loader {
  animation: spin 1s linear infinite;
}

Q26What are media queries and how do you use them?Medium▼

Media queries apply CSS rules only when specific conditions are met — primarily screen width. They're the foundation of responsive design.

CSS

/* Mobile-first approach: start mobile, add styles for larger screens */
.nav { flex-direction: column; } /* default: mobile */

@media (min-width: 768px) {      /* tablet and up */
  .nav { flex-direction: row; }
}

@media (min-width: 1024px) {     /* desktop */
  .sidebar { display: block; }
}

/* Other media features */
@media (prefers-color-scheme: dark)  { ... } /* dark mode */
@media (prefers-reduced-motion: reduce) { ... } /* reduced motion */
@media print { ... }                  /* print styles */

Q27What is the CSS calc() function?Medium▼

calc() allows mathematical calculations mixing different units in CSS property values.

CSS

/* Mix units: % minus px */
.sidebar { width: calc(100% - 260px); }

/* Dynamic spacing */
.hero { padding: calc(2rem + 5vw); }  /* grows with viewport */

/* Grid-like layout without grid */
.column { width: calc(33.333% - 16px); margin: 8px; }

/* CSS variable in calc */
:root { --nav-height: 60px; }
.content { min-height: calc(100vh - var(--nav-height)); }

Q28What are the CSS transform functions?Medium▼

transform applies 2D/3D transformations without affecting page layout (doesn't trigger reflow — great for animation performance).

CSS

.card:hover {
  transform: translateY(-4px);    /* move up 4px */
  transform: scale(1.05);         /* grow 5% */
  transform: rotate(45deg);       /* rotate */
  transform: skewX(10deg);        /* skew */

  /* Multiple transforms (order matters!) */
  transform: translateY(-4px) scale(1.02);
}

/* 3D transforms */
.flip-card {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

Use transform and opacity for animations — they're GPU-accelerated and don't cause layout recalculation.

Q29What is the CSS flex shorthand? What do flex-grow, flex-shrink, and flex-basis mean?Medium▼

flex: [grow] [shrink] [basis]

flex-grow — how much of the remaining space the item gets (0 = don't grow, 1 = grow proportionally)
flex-shrink — whether the item can shrink when there's not enough space (1 = can shrink, 0 = don't shrink)
flex-basis — the initial size before growing/shrinking (auto, px, %, etc.)

CSS

.item { flex: 1; }          /* flex: 1 1 0 — grow, shrink, start from 0 */
.item { flex: auto; }       /* flex: 1 1 auto — grow based on content */
.item { flex: none; }       /* flex: 0 0 auto — don't grow/shrink */
.item { flex: 0 0 200px; }  /* fixed 200px, never grow or shrink */
.item { flex: 2; }          /* grows twice as fast as flex:1 items */

Q30What is the Grid fr unit?Medium▼

fr (fraction) is a unit for CSS Grid that represents a fraction of the available space after fixed-size columns are taken.

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;     /* 3 equal columns */
  grid-template-columns: 2fr 1fr;         /* 2:1 ratio */
  grid-template-columns: 250px 1fr;       /* fixed sidebar + flexible main */
  grid-template-columns: repeat(3, 1fr);  /* same as 1fr 1fr 1fr */
}

/* fr takes remaining space after fixed columns */
/* 250px sidebar + 1fr main = main gets everything except 250px */

Q31What is the CSS :nth-child() selector?Medium▼

CSS

li:nth-child(1)     { ... }   /* first item */
li:nth-child(2)     { ... }   /* second item */
li:nth-child(odd)   { background: #f5f5f5; }   /* 1, 3, 5... */
li:nth-child(even)  { background: #ffffff; }   /* 2, 4, 6... */
li:nth-child(3n)    { ... }   /* every 3rd: 3, 6, 9... */
li:nth-child(3n+1)  { ... }   /* 1, 4, 7, 10... */
li:last-child       { border-bottom: none; }
li:first-child      { margin-top: 0; }
li:nth-last-child(2){ ... }   /* second from last */

Q32What is the CSS clamp() function?Medium▼

clamp(min, preferred, max) clamps a value between a minimum and maximum. Perfect for fluid typography and responsive sizing without media queries.

CSS

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* never smaller than 1.5rem */
  /* never larger than 3rem */
  /* prefers 5vw (scales with viewport) */
}

.container {
  width: clamp(320px, 90%, 1200px);
  /* min 320px, max 1200px, prefer 90% */
}

Q33What is CSS Grid auto-fit vs auto-fill?Medium▼

Both work with repeat() and minmax() to create a responsive grid without media queries. The difference appears when there are fewer items than columns:

auto-fill — fills the row with as many columns as fit, even if empty (empty tracks still take space)
auto-fit — collapses empty tracks to 0 width, so items stretch to fill the available space

CSS

/* auto-fit: items expand to fill row (most common) */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* auto-fill: preserves empty columns */
.grid-fixed {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

Q34How do you center an element horizontally and vertically in CSS?Medium▼

CSS

/* Method 1: Flexbox (most common) */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Method 2: Grid */
.parent {
  display: grid;
  place-items: center; /* shorthand for align + justify */
}

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

/* Method 4: Horizontal only (block elements) */
.block { width: 300px; margin: 0 auto; }

Q35What is mobile-first design?Medium▼

Mobile-first means writing CSS for small screens by default, then using min-width media queries to add styles for larger screens.

CSS

/* Mobile-first: default styles are for mobile */
.grid { grid-template-columns: 1fr; }
.nav { flex-direction: column; }
.sidebar { display: none; }

/* Then layer on tablet styles */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .nav { flex-direction: row; }
}

/* Then desktop styles */
@media (min-width: 1024px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; }
  .sidebar { display: block; }
}

Contrast with desktop-first (using max-width queries to reduce for smaller screens). Mobile-first is better because: mobile users are the majority, lighter CSS loads first, forces discipline in design priorities.

Advanced CSS Questions

Q36–Q50

Q36What is a CSS stacking context?Hard▼

A stacking context is an isolated group of layers. Elements inside it are stacked relative to each other, but as a unit relative to elements outside it. Once you create a new stacking context, z-index of its children only matters within it.

A new stacking context is created by:

The root element (<html>)
position: relative/absolute/fixed/sticky with a z-index value other than auto
opacity less than 1
transform, filter, will-change
isolation: isolate

CSS

/* .child has z-index:9999 but is INSIDE a stacking context */
/* with z-index:1, so it appears behind .other (z-index:2) */
.parent { position: relative; z-index: 1; }
.child  { position: relative; z-index: 9999; } /* 9999 only within parent */
.other  { position: relative; z-index: 2; }    /* above parent = above child */

Q37What is will-change in CSS?Hard▼

will-change hints to the browser that an element will be animated, so it can optimize (promote it to its own GPU layer) in advance.

CSS

.animated-card {
  will-change: transform, opacity;
}

/* Remove will-change after animation to free GPU memory */
.animated-card.done {
  will-change: auto;
}

Use sparingly! Overuse consumes GPU memory. Only apply it when you know an animation is about to happen (e.g., on :hover of the parent or just before animation starts via JS). Don't apply it to too many elements simultaneously.

Q38What is BEM methodology in CSS?Hard▼

BEM (Block, Element, Modifier) is a naming convention for CSS classes that makes them self-documenting and prevents naming conflicts.

Block — standalone component: .card, .nav, .button
Element — part of a block: .card__title, .card__image, .nav__link
Modifier — variant or state: .card--featured, .button--large, .nav__link--active

HTML/CSS

<!-- BEM HTML -->
<div class="card card--featured">
  <img class="card__image">
  <h3 class="card__title">Title</h3>
  <a class="card__btn card__btn--primary">Read</a>
</div>

CSS

.card { ... }
.card--featured { border: 2px solid gold; }
.card__title { font-size: 1.2rem; }
.card__btn { padding: 8px 16px; }
.card__btn--primary { background: blue; }

Q39What is the difference between CSS reset and CSS normalize?Hard▼

CSS Reset (e.g. Eric Meyer's reset) — strips all browser default styles to zero. You start from a blank slate and must style everything yourself.
CSS Normalize (normalize.css) — preserves useful browser defaults while fixing inconsistencies between browsers. More conservative, widely used in frameworks like Bootstrap.

CSS

/* Minimal modern reset (common in projects) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img, video { max-width: 100%; display: block; }
input, button, textarea { font: inherit; }
body { line-height: 1.5; }

Q40What is critical CSS?Hard▼

Critical CSS is the minimum CSS needed to render the above-the-fold content. By inlining it in <style> in the <head>, the page can render immediately without waiting for the full stylesheet to download.

HTML

<head>
  <!-- Critical CSS inlined: renders immediately -->
  <style>
    body { font-family: sans-serif; margin: 0; }
    .hero { height: 100vh; background: #1a1a2e; }
    .nav { position: sticky; top: 0; }
  </style>

  <!-- Full stylesheet loads asynchronously (non-blocking) -->
  <link rel="stylesheet" href="style.css" media="print"
        onload="this.media='all'">
</head>

Q41What is the CSS isolation property?Hard▼

isolation: isolate creates a new stacking context for an element without needing to set position or z-index. It's the cleanest way to prevent z-index conflicts between components.

CSS

.component {
  isolation: isolate; /* creates new stacking context */
  /* z-index values inside only compete with each other,
     not with elements outside .component */
}

/* Also useful with mix-blend-mode to scope blending */
.card {
  isolation: isolate;
}
.card .badge {
  mix-blend-mode: multiply; /* blends within .card, not the whole page */
}

Q42What are CSS @layer rules?Hard▼

@layer (CSS Cascade Layers) lets you define explicit layers of specificity. Lower layers are overridden by higher layers, regardless of selector specificity — making large stylesheets more manageable.

CSS

/* Declare order (first = lowest priority) */
@layer base, components, utilities;

@layer base {
  button { background: gray; padding: 4px 8px; }
}

@layer components {
  .btn { background: blue; }  /* overrides base.button */
}

@layer utilities {
  .bg-red { background: red !important; } /* highest layer */
}

/* Unlayered styles beat all layers */

Q43What is the CSS :has() selector (parent selector)?Hard▼

:has() selects an element if it contains a specified child — effectively a parent selector. This was considered impossible in CSS for decades.

CSS

/* Style a .card that contains an img */
.card:has(img) { border: 2px solid blue; }

/* Style form when it has an invalid input */
form:has(input:invalid) { background: #fff0f0; }

/* Style nav when it has a focused item */
nav:has(:focus-within) { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Style <li> that has a checked checkbox inside */
li:has(input:checked) { opacity: 0.5; text-decoration: line-through; }

Supported in all modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+).

Q44What is the CSS contain property?Hard▼

contain tells the browser that an element and its contents are independent — changes inside don't affect the outside. This enables render performance optimizations.

CSS

.widget {
  contain: layout;     /* layout changes inside don't affect outside */
  contain: paint;      /* content won't render outside element bounds */
  contain: size;       /* element size doesn't depend on children */
  contain: strict;     /* all containment (layout + paint + size) */
  contain: content;    /* layout + paint (most common) */

  /* content-visibility: auto skips off-screen elements entirely */
  content-visibility: auto;
  contain-intrinsic-size: 200px; /* placeholder size for layout */
}

Q45What is a CSS preprocessor? What are SASS/SCSS key features?Hard▼

A CSS preprocessor extends CSS with programming features and compiles to regular CSS. SASS/SCSS, LESS, and Stylus are the most popular.

Key SCSS features:

SCSS

// 1. Variables
$primary: #6366f1;
$font-stack: 'Inter', sans-serif;

// 2. Nesting
.nav {
  background: $primary;
  &:hover { opacity: 0.9; }    // & = parent selector
  &__link { color: white; }    // BEM: .nav__link
  &--active { font-weight: bold; } // .nav--active
}

// 3. Mixins (reusable blocks)
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero { @include flex-center; }

// 4. @extend (inheritance)
.btn { padding: 8px 16px; }
.btn-primary { @extend .btn; background: $primary; }

// 5. @import / @use for modular CSS

Q46What is the CSS aspect-ratio property?Hard▼

aspect-ratio sets a preferred width-to-height ratio for an element. The browser automatically calculates the missing dimension.

CSS

.video-embed { width: 100%; aspect-ratio: 16 / 9; }
.square       { width: 100%; aspect-ratio: 1; }
.portrait     { width: 200px; aspect-ratio: 3 / 4; }

/* Before aspect-ratio existed, this hack was needed: */
.old-way { padding-top: 56.25%; position: relative; }
/* 56.25% = 9/16 × 100 */

Q47How does CSS Grid's minmax() function work?Hard▼

minmax(min, max) defines a column/row size range — never smaller than min, never larger than max.

CSS

.grid {
  /* Column: at least 200px, can grow to fill (1fr) */
  grid-template-columns: repeat(3, minmax(200px, 1fr));

  /* Responsive without media queries: auto-fit + minmax */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Creates as many 280px+ columns as fit, stretching to fill */
}

/* Rows that grow but never shrink below 60px */
.grid { grid-auto-rows: minmax(60px, auto); }

Q48What are CSS logical properties?Hard▼

Logical properties use flow-relative directions instead of physical directions. They adapt automatically to different writing modes (RTL languages like Arabic, vertical CJK text).

CSS

/* Physical (LTR-specific) → Logical (writing-mode-aware) */
margin-left   → margin-inline-start
margin-right  → margin-inline-end
margin-top    → margin-block-start
margin-bottom → margin-block-end
padding-left  → padding-inline-start
width         → inline-size
height        → block-size

/* Modern shorthand */
.card {
  margin-inline: auto;        /* left+right = horizontal center */
  padding-block: 1rem;        /* top+bottom */
  padding-inline: 1.5rem;     /* left+right */
  border-block-end: 1px solid; /* bottom border */
}

Q49What is the CSS scroll-behavior and scroll-snap?Hard▼

CSS

/* Smooth scrolling for anchor links */
html { scroll-behavior: smooth; }

/* Scroll snap: carousel / full-screen sections */
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* snap on x-axis */
}
.slide {
  flex: 0 0 100%;
  scroll-snap-align: start; /* snap to start of each slide */
}

/* Full-screen page sections */
.container {
  height: 100vh; overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.section {
  height: 100vh;
  scroll-snap-align: start;
}

Q50What is the difference between a CSS reset, normalize, and modern approach?Hard▼

This is the evolution of handling browser default styles:

CSS Reset (2000s) — wipe everything to zero. Aggressive but requires styling everything from scratch.
Normalize.css (2010s) — fix inconsistencies between browsers while keeping useful defaults. Used by Bootstrap.
Modern minimal reset (2020s) — opinionated small reset that solves real problems without overdoing it.

CSS

/* Josh Comeau's Modern CSS Reset (2023) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
#root, #__next { isolation: isolate; }

← HTML Questions JavaScript Questions →