← All topics

HTML & CSS Senior interview questions and answers

75 questions for a HTML & CSS (Senior) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.How do @layer cascade layers affect style priority?
  2. 2.How do normal (non-!important) layered and unlayered styles rank against each other?
  3. 3.What does @scope (.card) to (.card__content) { img { ... } } do?
  4. 4.What problem does subgrid solve?
  5. 5.Which stages does the browser go through to update a frame after a style change?
  6. 6.What is layout thrashing (forced synchronous layout)?
  7. 7.What does contain: layout paint (or contain: content) give you?
  8. 8.How does content-visibility: auto speed up long pages?
  9. 9.Why don't ::before and ::after work on <img> and <input>?
  10. 10.What is float still appropriate for in modern layouts?
  11. 11.Why is em often recommended over px for media query breakpoints?
  12. 12.What happens to a position: fixed element if an ancestor has transform: translateZ(0)?
  13. 13.How does overflow: clip differ from overflow: hidden?
  14. 14.How should Sass modules be included now that @import is deprecated?
  15. 15.How does Dart Sass differ from Node Sass?
  16. 16.What problems does runtime CSS-in-JS (styled-components, Emotion) have with SSR and React Server Components?
  17. 17.Which techniques reduce the weight and performance impact of a custom web font?
  18. 18.How does asset bundling strategy change when moving from HTTP/1.1 to HTTP/2+?
  19. 19.What is a performance budget?
  20. 20.How does lab data (Lighthouse) differ from field data (CrUX, RUM)?
  21. 21.Which three metrics make up Core Web Vitals today?
  22. 22.How do you build a horizontal gallery with slides that "snap" into place without JavaScript?
  23. 23.What does @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; } enable?
  24. 24.How do you style the inside of a Web Component when Shadow DOM isolates its styles?
  25. 25.How do min-content, max-content and fit-content differ as width values?
  26. 26.What creates a new stacking context even without position and z-index?
  27. 27.What conditions make the vertical margins of a parent and its first child collapse?
  28. 28.Why can a long word or a wide table "blow out" a 1fr grid column?
  29. 29.Why is oklch() more convenient than hsl() for design systems?
  30. 30.What is color-mix(in oklch, var(--brand) 80%, white) for?
  31. 31.What does native CSS nesting (&) give you?
  32. 32.What is CSS Anchor Positioning used for?
  33. 33.What is the View Transitions API?
  34. 34.What is the minimum required for an accessible modal dialog?
  35. 35.What does the inert attribute do?
  36. 36.What minimum text contrast does WCAG level AA require for normal text?
  37. 37.How do WCAG conformance levels A, AA and AAA differ?
  38. 38.When are ARIA attributes needed, and when is it better to do without them?
  39. 39.What does text-wrap: balance do on a heading?
  40. 40.What are HTML landmarks, and why do they matter?
  41. 41.Which accessibility problem is typical for SPAs when the "page" changes on the client?
  42. 42.How does Tailwind v4 fundamentally differ from v3?
  43. 43.How do you make Tailwind v4's dark mode follow a .dark class instead of the system setting?
  44. 44.You're designing the CSS architecture of a multilingual site including Arabic (RTL) and Japanese. What should you plan for?
  45. 45.Which approach to fluid typography best respects the user's font scaling?
  46. 46.A 10,000-row table lags when scrolling. Which solution is most effective?
  47. 47.A gallery with 50 YouTube videos loads very slowly. What should you do first?
  48. 48.How does preload differ from prefetch in <link rel>?
  49. 49.How does defer differ from async on <script>?
  50. 50.A designer insists on fully custom styles for every control in a complex form. What's a sensible approach?
  51. 51.What does font-size: 5cqi mean inside a container query?
  52. 52.Why style errors with :user-invalid instead of :invalid?
  53. 53.What does the popover attribute give you?
  54. 54.What problem does @starting-style solve?
  55. 55.What do scroll-driven animations (animation-timeline: scroll()) allow?
  56. 56.What does color: light-dark(#111, #eee) do?
  57. 57.What does hyphens: auto need to work correctly?
  58. 58.Why use font-variant-numeric: tabular-nums in tables and timers?
  59. 59.What is the main advantage of a variable font?
  60. 60.How does size-adjust in a fallback @font-face reduce layout shift?
  61. 61.What does fetchpriority="high" on the hero image do?
  62. 62.Why add isolation: isolate to a component root?
  63. 63.What does overscroll-behavior: contain on a scrollable modal body prevent?
  64. 64.What layout shift does scrollbar-gutter: stable prevent?
  65. 65.What happens to your colors in Windows High Contrast (forced colors) mode?
  66. 66.What is a skip link?
  67. 67.How do you correctly associate an error message with an input?
  68. 68.What does the WCAG "Reflow" criterion require?
  69. 69.What does WCAG 2.2 "Target Size (Minimum)" ask for?
  70. 70.Why do build tools emit CSS files with content hashes (app.3f9a1c.css)?
  71. 71.Why split design tokens into primitive and semantic layers?
  72. 72.Why use dir="auto" on user-generated content such as comments?
  73. 73.Why prefer IntersectionObserver over scroll listeners for lazy loading or reveal effects?
  74. 74.Why avoid @import inside plain CSS files?
  75. 75.What does li:nth-child(2 of .visible) select?