In this guide, we’ve compiled almost 100 CSS interview questions along with clear and easy-to-understand answers. From selectors, the box model, Flexbox, and Grid to positioning, animations, and responsive design, these questions will help you refresh your concepts and boost your confidence before your next interview.
CSS Interview Questions List
Module 1: The Engine & Specificity
1. What color is the text, and why?
#archive .title { color: blue; }
h2.title.active { color: red; }
Code language: CSS (css)Answer: Blue. The first rule scores 110 (1 ID, 1 Class). The second scores 21 (1 Tag, 2 Classes). ID specificity always wins unless overridden by another ID or !important.
2. How do you override an inline style without touching the HTML? Answer: You must use !important in your CSS file. Inline styles score 1,000 points. Only !important (10,000 points) can beat it.
3. What is the difference between :is() and :where()? Answer: :is() takes the specificity of the most powerful selector inside its parentheses. :where() always has a specificity of exactly 0. Use :where() for base resets so they are easily overridden.
4. Why is my z-index: 9999 element hiding behind a z-index: 1 element? Answer: Stacking Contexts. If the parent of the 9999 element has a lower z-index than the parent of the 1 element, the child is trapped inside its parent’s stacking context.
5. Name three CSS properties that trigger a new Stacking Context (without using z-index). Answer: opacity (less than 1), transform, and filter.
6. Does padding inherit from parent to child? Answer: No. Typography properties (color, font-family) inherit by default. Layout properties (padding, margin, border) do not, unless you explicitly write padding: inherit.
7. What does the all: unset; property do? Answer: It strips all default browser styling and inherited styling from an element, returning it to the absolute baseline CSS specification.
8. How does the browser parse CSS selectors? (Left-to-Right or Right-to-Left?) Answer: Right-to-Left. For .dashboard .card span, the browser finds every span on the page first, then checks if they are inside a .card, then checks if that is inside .dashboard.
9. What is the difference between visibility: hidden and display: none? Answer: visibility: hidden hides the element visually, but it still takes up physical space in the DOM layout. display: none completely removes it from the layout geometry.
10. What is the “Flash of Unstyled Content” (FOUC)? Answer: It happens when the HTML loads before the CSS finishes downloading, causing a split-second flicker of raw, unstyled text. It is fixed by ensuring CSS <link> tags are in the <head>, blocking rendering until parsed.
Module 2: The Box Model & Flow
11. Why does my 100% width input field overflow its container when I add padding? Answer: By default, the CSS box model calculates width + padding + border = Total Size. Fix: box-sizing: border-box; forces padding and borders to be calculated inside the defined width.
12. I have a title with margin-bottom: 40px and a paragraph below it with margin-top: 20px. What is the space between them? Answer: 40px. This is Margin Collapse. Vertical margins touching each other do not add together; the browser takes the largest single value.
13. How do you permanently disable Margin Collapse? Answer: Place the elements inside a Flexbox or CSS Grid container. Margin collapse does not exist inside modern layout formats.
14. I gave an <a> tag a height of 50px and a top margin of 20px, but it didn’t change. Why? Answer: <a> tags are display: inline by default. Inline elements ignore width, height, margin-top, and margin-bottom. Fix: Change it to display: inline-block or display: block.
15. What is the difference between a pseudo-class and a pseudo-element? Answer: A pseudo-class (starts with :) targets the state of an element (e.g., :hover, :focus). A pseudo-element (starts with ::) creates a virtual HTML element that doesn’t exist in the DOM (e.g., ::before, ::after).
16. Why does my image have a tiny 3px white gap underneath it? Answer: Images are inline elements by default, leaving space below for text descenders (like the tail of a ‘y’). Fix: img { display: block; }.
17. What property is strictly required to make ::before or ::after render on the screen? Answer: The content property. If you omit content: "";, the pseudo-element will not generate.
18. What does position: sticky do? Answer: It acts like position: relative until the user scrolls past a specified threshold (e.g., top: 0), at which point it acts like position: fixed and pins itself to the screen.
19. You set position: absolute on a child. What does it align itself to? Answer: It aligns to the nearest ancestor that has a position other than static (usually position: relative). If it finds none, it aligns to the <body>.
20. What is a “Block Formatting Context” (BFC)? Answer: A mini-layout environment where elements follow their own internal rules, independent of the outside page. Flexbox, Grid, and overflow: hidden containers all create a new BFC, which traps margins inside.
Module 3: Layouts (Flexbox & Grid)
21. When should you use Flexbox vs CSS Grid? Answer: Flexbox is for 1-dimensional, content-driven layouts (rows or columns). Grid is for 2-dimensional, layout-driven architectures (rows and columns simultaneously).
22. How do you push a single button to the far right inside a flex container, while keeping other items on the left? Answer: Apply margin-left: auto; to the button. In Flexbox, auto margins aggressively consume all available empty space.
23. What does justify-content align? Answer: It aligns items along the Main Axis. If flex-direction is row, it aligns horizontally. If flex-direction is column, it aligns vertically.
24. What does flex: 1 0 auto; mean? Answer: It is shorthand for:
flex-grow: 1(It will stretch to fill empty space).flex-shrink: 0(It will refuse to shrink if the container is too small).flex-basis: auto(Its starting size is based on its inner content).
25. Explain grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));. Answer: It creates a responsive grid without media queries. It generates as many columns as possible that are at least 200px wide. Any leftover space is distributed equally (1fr) among them.
26. What is the difference between auto-fit and auto-fill in CSS Grid? Answer: auto-fill generates empty invisible columns to fill remaining space. auto-fit collapses empty columns and stretches the existing items to fill the row.
27. How does CSS subgrid solve the grandchild problem? Answer: It allows nested elements (grandchildren) to inherit and align to the track lines of their grandparent’s grid, ensuring perfectly aligned card headers/footers across sibling containers.
28. How do you center a div perfectly both vertically and horizontally? (Provide the modern way).
.parent {
display: grid;
place-items: center; /* Shorthand for align-items and justify-items */
}
Code language: CSS (css)29. What is the fr unit in CSS Grid? Answer: A “fractional unit.” It represents a fraction of the remaining free space after fixed pixel widths and gaps have been calculated.
30. How do you change the visual order of elements in Flexbox without changing the HTML? Answer: Use the order property on the child elements. (e.g., order: -1 moves an item to the very front).
Module 4: Fluidity, Math, & Selectors
31. What is the exact difference between min() and max() in CSS math? Answer: min() establishes a maximum cap (it chooses the smallest value to prevent growing). max() establishes a minimum floor (it chooses the largest value to prevent shrinking).
32. Explain how clamp(1rem, 5vw, 3rem) works. Answer: The font size will scale fluidly with the screen width (5vw), but it will never shrink smaller than 1rem on mobile, and never grow larger than 3rem on desktop.
33. What is a Container Query (@container), and why is it better than a Media Query? Answer: Media queries style elements based on the global browser width. Container queries style elements based on the width of their direct parent container. This allows UI components to adapt perfectly whether they are in a wide main feed or a narrow sidebar.
34. What CSS property is required on a parent to make Container Queries work? Answer: container-type: inline-size;
35. What does the :has() selector do? Answer: It allows you to style a parent element based on the state or presence of a child. (e.g., form:has(:invalid) styles the entire form if any input inside it fails validation).
36. How do you target an element only if it does NOT have a specific class? Answer: Use the :not() pseudo-class. Example: div:not(.active) { opacity: 0.5; }
37. What are Logical Properties in CSS? Answer: Properties based on text flow rather than physical screen directions. Instead of margin-left, you use margin-inline-start. This allows layouts to automatically mirror themselves for right-to-left (RTL) languages like Arabic.
38. How do you write a fallback for a CSS variable if the variable isn’t defined? Answer: Provide it as the second argument in the var() function: color: var(--brand-color, #000);
39. Can you put a media query inside a CSS variable? Answer: No. Variables can only store values, not logic blocks.
40. What does the color-mix() function do? Answer: It calculates a new color natively in the browser. Example: background: color-mix(in srgb, blue 50%, white); creates a pastel blue by blending 50% blue and 50% white.
Module 5: Architecture & Motion
41. What is the difference between a CSS Transition and a CSS Animation? Answer: A transition smoothly interpolates between an A and B state (like hover). An animation (using @keyframes) plays a complex, multi-step timeline of events, often looping indefinitely.
42. Why should you animate transform: translateX() instead of margin-left? Answer: Animating margin triggers a layout “Reflow” on the CPU, causing lag. Animating transform triggers a “Composite” on the GPU, yielding buttery smooth 60fps motion.
43. What happens at the end of a keyframe animation by default? Answer: The element instantly snaps back to its original 0% state. Fix: Add animation-fill-mode: forwards; to keep it locked at the 100% state.
44. What is a cubic-bezier curve in CSS? Answer: It is a mathematical timeline function used in transition-timing-function. It dictates the acceleration and deceleration of an animation, allowing for custom “bounce” or “snap” effects.
45. How does the CSS Houdini @property rule change variables? Answer: Standard CSS variables are just strings, so they cannot be animated. @property gives the variable a strict data type (syntax: '<color>'), which tells the browser how to mathematically animate it.
46. What problem do Cascade Layers (@layer) solve? Answer: They solve specificity conflicts. Rules in a higher layer always override rules in a lower layer, regardless of how mathematically heavy the selectors are.
47. How do you implement a Zero-JS Dark Mode? Answer: Use CSS variables wrapped in a media query: @media (prefers-color-scheme: dark) { :root { --bg: black; } }.
48. How do you create an animation that is driven by the user’s scrollbar instead of time? Answer: Use animation-timeline: view(); and animation-range to bind the keyframes directly to the element’s scroll intersection.
49. What is will-change: transform;? Answer: It is a hint to the browser to prepare the GPU for an upcoming animation on that element. It should be used sparingly, as overusing it consumes massive amounts of RAM.
50. You are building a complex data dashboard for a digital archive. Which combination of CSS features represents the most robust, modern architecture? Answer:
CSS Gridfor the macro layout.Container Queriesfor the individual article cards to adapt to sidebars.- Locally-scoped
CSS Variablesfor component theming. :has()for parent state changes (like selecting rows).Logical Propertiesfor internationalization support.
Module 6: Advanced Typography & Visuals
51. Why should you always use a unitless line-height (e.g., 1.5 instead of 1.5em)? Answer: Inheritance. If a parent has font-size: 20px and line-height: 1.5em (30px), all children inherit the computed 30px value, regardless of their own font size. If you use a unitless 1.5, each child dynamically recalculates its line height based on its own font size.
52. What are Variable Fonts? Answer: A single font file that contains multiple variations (weight, width, slant) mathematically interpolated. Instead of loading Roboto-Bold.woff and Roboto-Light.woff, you load one file and use font-variation-settings to dial in the exact weight (e.g., 432) using CSS.
53. What three CSS properties are strictly required to make text-overflow: ellipsis (...) work?
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Code language: CSS (css)(Missing any one of these three means it will fail).
54. What is the ch unit and when is it best used? Answer: The ch unit represents the exact width of the number “0” in the current font. It is the absolute best unit for setting a readable maximum line length for paragraphs: max-width: 65ch;.
55. Explain font-display: swap;. Answer: It tells the browser to immediately render text using a fallback system font while the custom web font is downloading. Once downloaded, it “swaps” them. This prevents the “Invisible Text” problem on slow networks.
56. How do you format text to run vertically for Japanese or traditional Chinese? Answer: Use writing-mode: vertical-rl; (Right-to-Left).
57. What is the difference between text-wrap: balance and text-wrap: pretty? Answer: balance makes all lines in a headline roughly equal in width, preventing a long top line and a tiny bottom line. pretty prevents “orphans” (a single word on the last line of a paragraph) by forcing at least two words onto the last line.
58. How do you implement a newspaper-style “Drop Cap” without adding extra HTML spans? Answer: Use the ::first-letter pseudo-element. p::first-letter { font-size: 3rem; float: left; }.
59. What does color-scheme: light dark; do? Answer: It allows the browser to automatically render default UI elements (scrollbars, form inputs, checkboxes, buttons) in dark mode if the user’s OS is set to dark mode, saving you from styling them manually.
60. How do you prevent a user from selecting or highlighting text on a button? Answer: user-select: none;
Module 7: Modern UI & Interactions
61. What is the difference between object-fit: cover and background-size: cover? Answer: They achieve the same visual result (filling a box without distorting the aspect ratio), but object-fit works on physical <img> or <video> HTML tags, while background-size only works on CSS background images.
62. Explain the aspect-ratio property. Answer: It allows you to lock the proportions of an element (e.g., aspect-ratio: 16 / 9;) without needing padding-bottom hacks. If the width changes, the height automatically scales to maintain the ratio.
63. How do you create a native, high-performance carousel without JavaScript? Answer: CSS Scroll Snapping. Apply scroll-snap-type: x mandatory; on the parent container, and scroll-snap-align: center; on the child cards. The browser handles the physics of snapping to the next card perfectly.
64. What is the difference between filter and backdrop-filter? Answer: filter: blur(5px) blurs the element itself. backdrop-filter: blur(5px) blurs the content behind the element (like Apple’s frosted glass UI). It requires a semi-transparent background to work.
65. How do you cut an element into a custom shape (like a triangle or star)? Answer: Use clip-path: polygon(...). It physically cuts the rendering boundary of the element.
66. What is the scrollbar-gutter property? Answer: It reserves space for the scrollbar even when it isn’t visible. This prevents your layout from jarringly shifting horizontally when a modal opens or dynamic content pushes the page past the viewport height.
67. How do you stop a user from scrolling the <body> when a modal is open, without using JavaScript? Answer: body:has(.modal.is-open) { overflow: hidden; }.
68. Explain overscroll-behavior: none;. Answer: It prevents “scroll chaining.” If a user scrolls to the bottom of a sidebar and keeps scrolling, the main page will normally start scrolling. This property stops the scroll event from bleeding into the parent.
69. What is the native CSS Popover API? Answer: A modern API that lets you build tooltips and dropdowns without z-index wars. Using HTML attributes (popovertarget), the browser promotes the element to the “Top Layer,” guaranteeing it sits above everything else on the page.
70. How do you make an element completely ignore mouse clicks so the user clicks the element behind it? Answer: pointer-events: none;
Module 8: Accessibility (A11y) & Media Features
71. What is the difference between :focus and :focus-visible? Answer: :focus triggers anytime an element receives focus (even from a mouse click, leaving an ugly blue ring on buttons). :focus-visible ONLY triggers when the user navigates using a keyboard. Always use :focus-visible for modern accessibility.
72. What is :focus-within? Answer: It applies styles to a parent element if any of its children receive focus. (e.g., Highlighting a form row when the user tabs into the input field inside it).
73. Explain @media (prefers-reduced-motion: reduce). Answer: A media query that detects if the user has disabled animations in their OS for accessibility (vestibular disorders). You should use it to globally set * { animation-duration: 0s !important; transition: none !important; }.
74. How do you visually hide a label but keep it readable for screen readers? Answer: You cannot use display: none or opacity: 0 (screen readers ignore them). You must use the .sr-only pattern: clipping the element to a 1px box and hiding it off-screen using position: absolute.
75. What is @supports (Feature Queries)? Answer: It allows you to write conditional CSS based on browser support. @supports (display: grid) { ... }. It acts exactly like a media query, but for browser capabilities.
76. What is the CSS outline property and why shouldn’t you use border for focus states? Answer: outline draws a ring around the element without affecting the Box Model dimensions. If you use border for a focus state, it adds pixels to the element, causing the layout to physically shift when focused.
77. How large should a touch target (button/link) be for mobile accessibility? Answer: The absolute minimum according to WCAG is 44×44 pixels. You use padding or min-height/min-width to enforce this.
78. What does @media (forced-colors: active) do? Answer: It detects if the user is using Windows High Contrast mode. In this mode, the browser strips all custom backgrounds and shadows. You use this query to add fallback borders so your UI remains visible.
79. How do you style an element based on the URL hash (e.g., [example.com/#section-2](https://example.com/#section-2))? Answer: The :target pseudo-class. If the URL is #section-2, the element with id="section-2" can be styled (e.g., highlighted yellow) using #section-2:target.
80. What is semantic HTML and why does CSS depend on it for accessibility? Answer: Using <button> instead of <div class="button">. CSS can make a div look like a button, but it cannot give the div keyboard focus or tell a screen reader that it is an interactive element.
Module 9: Architecture & Methodologies
81. What is BEM? Answer: Block Element Modifier. A naming convention (.card__title--active) designed to keep CSS flat and avoid deep specificity wars.
82. What is Utility-First CSS (The Tailwind Concept)? Answer: Instead of writing semantic classes (.author-card), you use single-purpose classes (.flex .p-4 .bg-blue-500). It prevents CSS stylesheets from growing infinitely, as styles are composed directly in the HTML.
83. Explain CSS Modules / Scoped CSS. Answer: A build-step architecture (used heavily in React/Vue) that automatically hashes CSS class names (e.g., .title becomes .title_8xJ2). This guarantees no CSS rules will ever leak and affect other components on the page.
84. What are Design Tokens? Answer: Abstracting design decisions (colors, spacing, typography) into raw data (usually JSON), which is then compiled into CSS Variables. This ensures the web app, iOS app, and Android app all consume the exact same source of truth.
85. What is the difference between Responsive and Adaptive design? Answer: Responsive design uses a single fluid layout that scales smoothly across all screens (using Flexbox/Grid and Media Queries). Adaptive design serves entirely different, rigid layouts (and often different HTML/JS) based on device detection.
86. What is the difference between a CSS Reset and Normalize.css? Answer: A Reset aggressively destroys all browser defaults (e.g., strips all margins and padding from <h1>). Normalize.css preserves useful defaults but ensures they render exactly the same across Chrome, Safari, and Firefox.
87. What is ITCSS (Inverted Triangle CSS)? Answer: A methodology for organizing large codebases. You start with broad, low-specificity rules at the top (Resets, Elements), and move down to highly specific rules at the bottom (Components, Utilities).
88. Why is SASS nesting dangerous if overused? Answer: Nesting 4 or 5 levels deep in SASS compiles to massive CSS selectors (e.g., .header .nav .list .item a { }). This inflates file size and creates a specificity nightmare that is impossible to override. Limit nesting to 2-3 levels maximum.
89. Why are SASS variables ($color) considered obsolete compared to CSS Variables (--color)? Answer: SASS variables are resolved at compile-time. Once the CSS is generated, the variable is gone. CSS Variables exist at runtime in the browser DOM, meaning they can be manipulated by JavaScript or Media Queries dynamically.
90. What is the DRY principle in CSS, and when should you break it? Answer: Don’t Repeat Yourself. You group common styles. However, in modern component architecture, breaking DRY is often preferred, it is better to have repetitive CSS encapsulated safely inside a component than highly coupled “shared” CSS that breaks the whole site when modified.
Module 10: Performance & The Browser Engine
91. What is the difference between a Reflow (Layout) and a Repaint? Answer: Reflow occurs when changing geometry (width, margin, position). The browser must recalculate the size of every element on the page. It is highly expensive. Repaint occurs when changing colors or visibility. It is much cheaper.
92. What is the Critical Rendering Path? Answer: The sequence of steps the browser takes to render a page: Build DOM (HTML) -> Build CSSOM (CSS) -> Build Render Tree -> Layout (Reflow) -> Paint -> Composite.
93. What does CSS Containment (contain: strict;) do? Answer: It tells the browser that this element’s internal layout is completely isolated from the rest of the page. If a child inside this container changes size, the browser skips recalculating the rest of the document, massively boosting performance.
94. What is content-visibility: auto;? Answer: The holy grail of scroll performance. It tells the browser to completely skip the rendering, layout, and painting of elements that are currently off-screen. It works like lazy-loading, but for the DOM calculation itself.
95. How do you force an element onto its own GPU hardware layer? Answer: Use will-change: transform; or apply a 3D transform like transform: translateZ(0);. This passes the rendering of that specific element to the graphics card.
96. Why is overusing will-change a performance trap? Answer: Creating a new GPU layer consumes VRAM (Video RAM). If you apply will-change to 100 elements on a page, you will exhaust a mobile device’s memory and crash the browser tab.
97. Why are CSS selectors parsed right-to-left, and how does it impact performance? Answer: If the browser parses .nav a, it finds all a tags first, then checks their parents. If you have 10,000 links on a page, this is slow. It is faster to use a single class .nav-link because the browser finds it instantly without traversing up the tree.
98. What is the CSSOM? Answer: The CSS Object Model. Just like the DOM is a tree of HTML nodes, the CSSOM is a tree of style rules. The browser cannot render the page until the CSSOM is completely constructed (which is why CSS is render-blocking).
99. How do you load non-critical CSS (like a heavy font file) without blocking the page load? Answer: Put it in a <link> tag with rel="preload" as="style", and then flip it to rel="stylesheet" using a tiny inline script once it finishes loading.
100. What is “Intrinsic Web Design”? Answer: The modern philosophy that replaces traditional responsive design. Instead of using media queries to force the page to fit the screen, you use intrinsic sizing (min-content, fit-content), clamp(), and Flexbox/Grid so the components mathematically resolve their own layout based on their content and available space.
That’s all. Make sure to watch the video above to learn some of the concepts.
Top rated products
-
Probability and Statistics for Machine Learning and Data Science
Original price was: 30.00$.12.99$Current price is: 12.99$.
-
SVM Notes: Optimization & Implementation
Original price was: 9.99$.4.99$Current price is: 4.99$.
-
Spidy Mail Hunter: Powerful And Intelligent Website & PDF Email Extractor Software (Windows App)
Original price was: 149.00$.49.00$Current price is: 49.00$.
-
Linear Algebra For Machine Learning And Data Science
Original price was: 40.00$.24.99$Current price is: 24.99$.
-
Clustering and Outlier Detection
Original price was: 20.97$.13.47$Current price is: 13.47$.
Neuraldemy
Neuraldemy
Software Development
Neuraldemy helps you learn ML, AI, Web Dev and data science from scratch. Addtionally, we also provide web development and hosting services for businesses, and individuals