CSS interview questions test layout and the cascade. Expect to explain why a style does not apply, how flexbox and grid place items, and how to build layouts that work on every screen size.
Below are 60 CSS questions with the correct answer and a short explanation, grouped from fresher to experienced level. Try each one before you open the answer.
A div has width: 200px, padding: 20px and border: 5px, with box-sizing: border-box. What is its total rendered width?
Answer: A. 200px
With border-box, the declared width includes padding and border, so the box stays 200px wide and the content area shrinks to 150px. With the default content-box, the total would be 200 + 40 + 10 = 250px.
An element has position: absolute; top: 0; left: 0. Its top-left corner is placed relative to what?
Answer: C. The nearest ancestor whose position is not static
An absolutely positioned element is placed inside its containing block, which is the nearest ancestor with position relative, absolute, fixed or sticky (or the initial containing block if there is none). That is why you add position: relative to a card when you want a badge pinned to its corner. Fixed positioning is the one that uses the viewport.
A grid container is exactly 300px wide with no gap and no padding. How wide are the two columns?
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
}Answer: D. 100px and 200px
The fr unit shares out the free space in the grid track by fractions. There are 3 fractions in total, so each fraction is 100px: the first column gets 1 share (100px) and the second gets 2 shares (200px). fr is the simplest way to build flexible, proportional columns.
In a mobile-first stylesheet, the base styles are written for small screens. Which media query should wrap the extra styles for tablets and larger screens?
Answer: A. @media (min-width: 768px)
Mobile-first means the default CSS targets small screens and you add layers for wider screens with min-width queries. A min-width query applies from that width and up. max-width queries are used in a desktop-first approach, where you start wide and override for smaller screens.
In Tailwind CSS, when does the text-lg style apply on this element?
<p class="text-sm md:text-lg">Hello</p>
Answer: C. From the md breakpoint (768px by default) and wider
Tailwind is mobile-first: an unprefixed class applies at every size, and a prefix like md: means "at this min-width and above". So the text is small on phones and large from 768px up, including on large desktops. To target only a range you would combine a breakpoint with a max-* variant.
A control opens the /pricing page. Another control opens a filter panel on the same page. Which elements should they be?
Answer: A. <a href="/pricing"> and <button>
Links navigate to a URL; buttons perform actions on the current page. Using the right element gives the correct keyboard behaviour, screen reader role and browser features like open in new tab for links.
A report shows a chart image with a caption "Sales by emirate, 2025" under it. What is the semantic way to mark this up?
Answer: B. <figure> with <img> and <figcaption>
<figure> groups self-contained media with its caption, and <figcaption> ties the caption to it for assistive technology. The image still needs its own alt text describing the chart.
A page has two inputs with id="phone". What can go wrong?
Answer: D. Labels and getElementById reach only one of them
An id must be unique in the document. getElementById returns only the first match, <label for="phone"> links to only one input, and aria-describedby can point to the wrong element. Copy-pasted components often cause this.
Which HTML gives an accessible expand/collapse FAQ item with no JavaScript?
Answer: A. <details><summary>Question</summary>Answer</details>
<details> and <summary> make a native disclosure widget. The summary is focusable, works with Enter and Space, and screen readers announce whether it is expanded. The name attribute can group several so only one stays open.
With the default box-sizing: content-box, how wide does this box appear on screen?
.card {
width: 200px;
padding: 20px;
border: 2px solid #ccc;
}Answer: D. 244px
In content-box, width sets only the content area. Padding and border are added outside it: 200 + 20 + 20 + 2 + 2 = 244px. With border-box, the whole box would be 200px instead.
A parent has color: navy and border: 1px solid red. Which of these does a child <p> inherit by default?
Answer: D. color only
Text-related properties such as color, font and line-height inherit by default. Box properties like border, padding, margin and background do not. You can force inheritance with the inherit keyword.
An article starts with an <h2>, then several <p> elements. Which selector styles the first paragraph?
Answer: D. article p:first-of-type
:first-child matches only if the element is the very first child of its parent; here that is the h2, so p:first-child matches nothing. :first-of-type picks the first element of that tag name among its siblings.
How can CSS switch to dark colours when the user’s phone or laptop is set to dark mode?
Answer: B. @media (prefers-color-scheme: dark) { ... }
The prefers-color-scheme media feature reports the user’s system theme as light or dark. Redefine your colour custom properties inside it so the whole site switches with one block of CSS.
On slow 3G, headings stay blank for seconds until the web font arrives. Which @font-face setting shows fallback text at once?
Answer: C. font-display: swap
font-display: swap shows text in a fallback font immediately and swaps in the web font when it loads. block hides the text for a short period first. Pair swap with a well-matched fallback to limit layout shift.
When a customer prints an invoice, the site header and chat widget should be hidden. Where should that CSS go?
Answer: D. Inside @media print { ... }
@media print rules apply only when printing or saving as PDF. Hide navigation and widgets there, and use break-inside: avoid on table rows or cards so they are not split across pages.
A two-line heading leaves a single word alone on its second line. Which CSS evens out the line lengths?
Answer: A. text-wrap: balance
text-wrap: balance makes the browser choose line breaks so lines are about equal length, which suits short headings. nowrap prevents wrapping entirely, and break-all splits words in the middle.
Why does a normal stylesheet link in the head delay the first paint?
Answer: A. The browser waits for CSS so it does not paint unstyled content
The browser needs the CSSOM to know how things look, so by default it holds the first render until stylesheets in the head arrive. That avoids a flash of unstyled content, but it means large or slow CSS files delay FCP and LCP.
A product thumbnail shows at 300 × 300 CSS pixels, but the file is 3000 × 3000 pixels. On a phone with a 2x screen, what size is enough?
Answer: C. About 600 × 600 pixels
A 2x screen uses two device pixels per CSS pixel, so 300 × 2 = 600 pixels each side is sharp. The 3000 px file has 25 times as many pixels as needed, wasting bandwidth and decode time.
For text files like JS and CSS, how does Brotli usually compare to gzip?
Answer: A. Smaller files at similar decompress speed
Brotli usually makes text files about 15–25% smaller than gzip. Static files can be compressed at high Brotli levels once at build time, so the slower compression does not matter.
Which claim is likely to feel more credible to readers?
Answer: B. 'Customers save an average of 3.2 hours a week'
A precise figure suggests it was measured, so it feels more believable than vague praise. It must be accurate and you should be able to show how it was measured. Vague words like 'tons' or 'countless' are easy to dismiss.
You want a card grid that fits as many columns as possible, each at least 200px wide, with the columns stretching to fill the row. Which grid-template-columns value does this?
Answer: B. repeat(auto-fit, minmax(200px, 1fr))
auto-fit creates as many tracks as fit in the container, and minmax(200px, 1fr) lets each track be at least 200px but grow to share the leftover space. The layout changes column count by itself as the width changes. repeat(auto-fit, 1fr) is invalid because auto-repeat needs a definite minimum size.
A developer adds role="checkbox", aria-checked and key handlers to a styled <div>. What does the "first rule of ARIA" suggest?
Answer: B. Use a native <input type="checkbox"> and style it
If a native HTML element already has the meaning and behaviour you need, use it instead of rebuilding it with ARIA. Native inputs come with focus, keyboard support, form submission and correct announcements for free; ARIA only changes what is announced.
After clicking Add to cart, a small text "Added to cart" appears. Screen reader users hear nothing. What fixes it?
Answer: B. Put it in a role="status" region that exists on load
Screen readers announce changes inside a live region (role="status" or aria-live="polite"). The empty region should exist in the DOM before the text is added, otherwise some readers miss the change. alert() works but interrupts every user.
Which attribute lets phones offer the SMS one-time password straight from the keyboard?
Answer: A. autocomplete="one-time-code"
autocomplete="one-time-code" tells iOS and Android the field expects an SMS code, so they suggest it above the keyboard. Combine it with inputmode="numeric". There is no input type="otp".
You add a new .item element after taking both lists. Which list includes it?
const a = document.querySelectorAll(".item")
const b = document.getElementsByClassName("item")
container.append(newItem) // newItem has class "item"Answer: B. Only b
querySelectorAll returns a static NodeList, a snapshot taken at call time. getElementsByClassName returns a live HTMLCollection that updates as the DOM changes. Looping over a live collection while removing items can skip elements.
What is the difference between the hidden attribute and aria-hidden="true"?
Answer: D. hidden hides it from everyone; aria-hidden only from assistive tech
The hidden attribute applies display: none, so the element is neither shown nor announced. aria-hidden="true" leaves it visible but removes it from the accessibility tree, which suits decorative icons. A CSS display rule can override hidden.
A hamburger <button> opens and closes the mobile menu. What should change on the button when the menu opens?
Answer: B. aria-expanded from "false" to "true"
aria-expanded tells screen readers whether the control’s related content is open, so they announce "Menu, button, expanded". Pair it with aria-controls pointing at the menu’s id if useful. The role should stay button.
A <form> has one text input and a submit button. The user presses Enter in the input. What happens?
Answer: A. The form submits, as if the button was clicked
Browsers support implicit submission: Enter in a text field submits the form through its default button. This is good for search boxes and logins. If you build forms with divs and no <form>, you lose this behaviour.
A header flex row has a logo, three links and a Login button. Only Login should sit at the far right. What is the simplest CSS?
Answer: A. margin-left: auto on the Login button
In flexbox, an auto margin absorbs all free space on that side. margin-left: auto on Login pushes it, and only it, to the end. float has no effect on flex items, and flex-end would move everything right.
A main column must take the full width minus a 280px sidebar. Which value works?
Answer: D. width: calc(100% - 280px)
calc() can mix units like % and px, but + and − must have spaces around them. calc(100%-280px) is invalid because it reads as a single token, and plain 100% - 280px is not valid CSS.
With a 16px root font size, what is the font size at a 1000px wide viewport, and at 400px?
h1 { font-size: clamp(1rem, 2.5vw, 2rem); }Answer: B. 25px at 1000px, and 16px at 400px
clamp(min, preferred, max) uses the preferred value but limits it. 2.5vw is 25px at 1000px, which is between 16px and 32px. At 400px it would be 10px, so the minimum 16px is used.
A component sets button { all: unset } and the buttons lose their browser styles. What does revert do differently from initial?
Answer: A. revert goes back to the browser default; initial uses the spec default
initial sets the property’s spec default, so display: initial is inline even for a div. revert rolls back to what the previous origin set, usually the browser stylesheet, so a div gets display: block again. unset inherits if the property inherits, else acts like initial.
A 300 KB stylesheet in <head> makes the page stay white for two seconds on slow networks. Why?
Answer: C. Browsers wait for CSS in head before the first paint
To avoid showing unstyled content, the browser holds rendering until stylesheets in the head are downloaded and parsed. Inline the small critical CSS for above-the-fold content and load the rest later or split it by page.
Does <link rel="stylesheet" href="print.css" media="print"> delay the first paint on screen?
Answer: C. No; it downloads at low priority without blocking
A stylesheet whose media query does not match the current environment is still downloaded, but at low priority and without blocking rendering. Splitting CSS by media type is a simple way to shrink the blocking CSS.
Why is this loop slow with 500 cards?
cards.forEach((c) => {
c.style.height = "auto"
c.style.height = c.offsetHeight + 10 + "px"
})Answer: D. Each offsetHeight read after a write forces layout
Reading layout values like offsetHeight right after changing styles forces the browser to compute layout immediately. Doing write, read, write in a loop causes 500 forced layouts. Read all heights first, then write all changes.
A long article page spends a lot of time in layout. Which CSS can let the browser skip rendering sections that are off screen?
Answer: D. content-visibility: auto with contain-intrinsic-size
content-visibility: auto lets the browser skip layout and paint for off-screen content until it nears the viewport. contain-intrinsic-size gives a placeholder size so the scrollbar does not jump as sections render.
Which Chrome DevTools tool shows how many bytes of each JS and CSS file were actually used during a page load?
Answer: B. The Coverage tab
Coverage records which bytes ran or which CSS rules applied, and shows unused bytes in red. Large unused shares point to code that should be split, lazy-loaded or removed.
A widget updates often and its changes cause layout work across the whole page. Which CSS can limit the work to the widget?
Answer: A. contain: layout paint on the widget
contain tells the browser that the element's insides do not affect outside layout or paint. Changes inside it can then be handled locally, which cuts style and layout cost on busy pages.
A front-end card animation stutters when it animates the CSS "left" property. Which change usually makes it smooth?
Answer: B. Animate transform: translate instead of left
Changing left triggers layout and paint every frame. transform and opacity can be handled by the compositor on the GPU without re-layout, so they animate smoothly even when the main thread is busy. Use will-change sparingly, as layers use memory.
A design team dislikes focus rings appearing on mouse clicks but must keep them for keyboard users. What CSS approach fits?
button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 2px;
}Answer: A. Style focus with :focus-visible
:focus-visible lets browsers show focus styles when focus came from the keyboard or when it is otherwise helpful, and not after most mouse clicks. Focus must never simply be removed, as WCAG 2.4.7 requires it to be visible.
A modal has position: fixed; z-index: 9999 but appears behind a header with z-index: 10. The modal is inside a parent with transform: translateZ(0) and z-index: 1. Why?
Answer: B. The parent creates a stacking context, so the modal is stacked inside the parent, which is below the header
transform (and also opacity below 1, filter, or z-index on a positioned element) creates a new stacking context. Children can only be ordered within that context, so the whole parent layer, at z-index 1, sits below the header at 10. Rendering the modal in a portal near the body or using the native <dialog> top layer fixes it.
The .title has white-space: nowrap; overflow: hidden; text-overflow: ellipsis, but a long title pushes .main wider than the screen instead of truncating. What fixes it?
.layout { display: flex; }
.sidebar { width: 240px; flex-shrink: 0; }
.main { flex: 1; }
.main .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }Answer: C. Add min-width: 0 to .main
Flex items default to min-width: auto, which means they refuse to shrink below the width of their content. The long nowrap title sets that minimum, so .main grows past the container and the ellipsis never kicks in. min-width: 0 (or overflow: hidden on .main) lets the item shrink, so the title can truncate.
A side drawer slides in by animating its left property from -300px to 0. It stutters on mid-range phones. What is the best change?
Answer: C. Animate transform: translateX() instead, so it can run on the compositor without layout or paint
Changing left or margin triggers layout and paint on every frame, which is expensive on the main thread. transform and opacity can be handled by the compositor on the GPU, so the animation stays smooth even when JavaScript is busy. will-change does not help a property that still needs layout each frame.
The same ProductCard appears in a narrow sidebar and a wide main area on the same screen. It should switch to a horizontal layout when the card itself has at least 400px. What is the right tool?
Answer: D. container-type: inline-size on the card wrapper and an @container (min-width: 400px) rule
Media queries respond to the viewport, which is the same for both cards, so they cannot tell a narrow slot from a wide one. Container queries respond to the size of a chosen ancestor container, which makes the component adapt wherever it is placed. They are supported in all modern browsers.
What accessible name does a screen reader give this input?
<span id="x">Mobile number</span> <label for="p">Phone</label> <input id="p" aria-label="Contact" aria-labelledby="x">
Answer: C. Mobile number
In the accessible name calculation, aria-labelledby comes first, then aria-label, then native labels like <label>, then title or placeholder. Mixing several is confusing; keep one clear label that matches the visible text.
A custom side drawer is open. What is the simplest way to stop Tab and screen readers from reaching the page behind it?
Answer: D. Set inert on the page content outside the drawer
The inert attribute makes an element and its subtree non-focusable, non-clickable and hidden from assistive technology. It is supported in all modern browsers. pointer-events only affects the mouse, and z-index only changes what is painted on top.
WCAG 2.2 added a level AA rule for pointer target size. What is the minimum, unless enough spacing is given?
Answer: D. 24 by 24 CSS pixels
Success criterion 2.5.8 Target Size (Minimum) asks for at least 24 × 24 CSS pixels, or enough space around smaller targets. 44 × 44 is the stricter AAA rule (2.5.5) and the size Apple recommends, which is still a good goal for main buttons.
A designer moved the "Buy" button visually above the price with order: -1 in a flex container. What accessibility issue does this cause?
Answer: B. Tab and screen reader order still follow the DOM
Flexbox order and grid placement change only the visual position. Keyboard focus and screen readers still go through the DOM order, so what users see and what they hear no longer match. Change the HTML order when the meaning changes.
A KYC upload uses <input type="file" accept=".pdf,.jpg">. Why is server-side checking still required?
Answer: B. accept only filters the picker; any file can still be sent
accept is a hint to the file picker. Users can choose "All files", and attackers can send any request directly. The server must check size, the real file type (magic bytes, not just the extension) and scan for malware.
A script appends 100 list items in one loop while a MutationObserver watches the list. How is the callback called?
Answer: D. Once after the loop, with a batch of records
MutationObserver queues records and delivers them in a microtask after the current script finishes, so the loop’s changes arrive together in one call. This makes it far cheaper than the old synchronous mutation events.
A hero section has a background colour. Its first child h1 has margin-top: 40px, but the gap appears above the coloured section instead of inside it. Why?
Answer: C. The child’s top margin collapses through the parent
If a parent has no top padding, border or new formatting context, its first child’s top margin collapses with its own and shows outside it. Add padding-top, a border, or display: flow-root on the parent, or use padding on the child.
A 1200px grid uses repeat(auto-fill, minmax(200px, 1fr)) and has only 2 cards. What happens, and what would auto-fit do?
Answer: B. auto-fill keeps empty tracks; auto-fit lets the 2 cards stretch
Both create as many 200px+ tracks as fit, here 6. auto-fill keeps the empty tracks, so the 2 cards stay about 200px wide. auto-fit collapses empty tracks to zero, so the 1fr columns grow and each card becomes about 600px.
A sidebar has height: 100%, but it is only as tall as its content. Its parent has no height set. Why?
Answer: D. A percentage height needs a parent with a definite height
If the parent’s height depends on its content (height: auto), a percentage height on the child has nothing definite to resolve against and behaves like auto. Give the chain a definite height, or use flexbox or grid stretch, or min-height: 100dvh.
A grid has gap: 24px 8px. What does each value set?
Answer: D. Row gap 24px and column gap 8px
gap is shorthand for row-gap then column-gap. So 24px goes between rows (vertical space) and 8px between columns. With one value both are the same.
Every product card in a list has view-transition-name: product-image. Calling document.startViewTransition() now skips the animation. Why?
Answer: C. Each view-transition-name must be unique on the page
The View Transitions API pairs old and new elements by name, so two visible elements with the same name is an error and the transition is skipped. Give each card a unique name, or set the name only on the clicked card.
In Windows High Contrast (forced colors) mode, buttons styled only with a background colour and no border look like plain text. What is the usual fix?
Answer: D. Add a transparent border, which that mode draws
Forced colors mode replaces author colours with the user’s system palette and removes box-shadows, so background-only buttons lose their shape. A transparent border costs nothing normally but is drawn in the system colour in that mode. Test with @media (forced-colors: active).
Opening a modal sets body { overflow: hidden }, and the whole page shifts sideways by the scrollbar width on Windows. Which property prevents the jump?
Answer: A. scrollbar-gutter: stable on the scroller
When the scrollbar disappears, the content area gets wider and everything moves. scrollbar-gutter: stable keeps the space for the scrollbar reserved even when it is not shown, so the layout stays still.
A site loads Inter in weights 300, 400, 500, 600 and 700 as five files. What is usually the better option?
Answer: A. One variable font file covering the weight range
A variable font holds a continuous weight axis in a single file, so one request replaces five and any weight like 550 is possible. It is often smaller in total. Faux bold looks poor, and preloading many files competes with more important resources.
A server returns a CSS file with Last-Modified ten days ago but no Cache-Control or Expires. What may a browser do?
Answer: C. Treat it as fresh for about 10% of its age
Without explicit freshness, caches may use heuristic freshness, commonly 10% of the time since Last-Modified. Ten days gives about one day, so users can see stale CSS. Always send clear Cache-Control headers.
At 320 CSS pixels wide, a financial data table with 12 columns needs horizontal scrolling. Does that fail WCAG 1.4.10 Reflow?
Answer: A. No, content needing 2D layout is exempt
Reflow exempts content that requires two-dimensional layout for usage or meaning, such as data tables, maps and complex diagrams. The rest of the page must still reflow, and the table should scroll within its own container.
Take a 15-question CSS MCQ test with a score at the end, or practise the full CSS question bank and earn points on the leaderboard.