← All topics

HTML & CSS Middle interview questions and answers

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

Take this quiz
  1. 1.What is the specificity of the selector nav#main .item:hover > a::before?
  2. 2.How do you override a third-party library's !important rule without touching its code?
  3. 3.What does the shorthand flex: 1 expand to?
  4. 4.How does flex-basis differ from width on a flex item in a row (flex-direction: row)?
  5. 5.Inside a flex item, long text with text-overflow: ellipsis doesn't truncate and stretches the column instead. How do you fix it?
  6. 6.How does repeat(auto-fill, minmax(200px, 1fr)) differ from repeat(auto-fit, minmax(200px, 1fr))?
  7. 7.How do you define a "header on top, sidebar and content in the middle, footer at the bottom" layout in Grid with named areas?
  8. 8.What is an implicit grid?
  9. 9.What does place-items: center do on a grid container?
  10. 10.When is Grid more appropriate, and when Flexbox?
  11. 11.What does font-size: clamp(1rem, 2.5vw, 2rem) resolve to on a 1000px-wide screen (1rem = 16px)?
  12. 12.Why use logical properties like margin-inline-start instead of margin-left?
  13. 13.How does transition differ from animation?
  14. 14.Which properties are best to animate for smooth 60 FPS?
  15. 15.Why is transform: translate() often better than changing left on a position: absolute element for movement animations?
  16. 16.How should will-change be used?
  17. 17.What is Critical CSS?
  18. 18.What does the CLS (Cumulative Layout Shift) metric measure?
  19. 19.Which technique best prevents layout shifts caused by loading images?
  20. 20.What does font-display: swap do in @font-face?
  21. 21.What are the srcset and sizes attributes on <img> for?
  22. 22.When do you need <picture> rather than just <img srcset>?
  23. 23.What does loading="lazy" on <img> do, and when should you NOT use it?
  24. 24.What does object-fit: cover do on an <img> with set width and height?
  25. 25.What is the specificity of :where(.card, #hero) p?
  26. 26.What does the selector .card:has(img) match?
  27. 27.How do CSS variables (--x) fundamentally differ from Sass variables ($x)?
  28. 28.What is a stacking context, and why might z-index: 9999 "not work"?
  29. 29.position: sticky isn't working even though top: 0 is set. What's the most likely cause?
  30. 30.What is a block formatting context (BFC), and how do you create one?
  31. 31.What's new about the @media (width >= 768px) syntax?
  32. 32.What are @container container queries for?
  33. 33.Why can height: 100vh be taller than the visible area on mobile, and how do you fix it?
  34. 34.What does the currentColor value mean?
  35. 35.How do the initial, inherit and unset values differ?
  36. 36.In BEM, how do you correctly name the title class inside a card block in its "accent" variant?
  37. 37.How do CSS Modules solve class-name collisions?
  38. 38.Why is :focus-visible better than :focus for styling the focus outline?
  39. 39.What does tabindex="-1" do?
  40. 40.When is aria-label justified?
  41. 41.How do you apply an arbitrary value in Tailwind that isn't in the theme?
  42. 42.Why can't you build a Tailwind class name like ` bg-${color}-500 `?
  43. 43.How do you add a custom brand color in Tailwind v4 so that bg-brand, text-brand, etc. work?
  44. 44.What are group and peer for in Tailwind?
  45. 45.A React component merges external classes: className={"p-2 " + props.className}, and receives p-4. What padding results?
  46. 46.What is Tailwind's @apply directive for, and why shouldn't you overuse it?
  47. 47.How do you accommodate users for whom animations cause discomfort?
  48. 48.How do you build a two-column layout with a fixed-width sidebar and content filling the rest?
  49. 49.Which image format usually gives the best compression for photos in modern browsers?
  50. 50.How do you properly include print-only styles?
  51. 51.What is the specificity of :is(#hero, .card) p?
  52. 52.What does aspect-ratio: 16 / 9 give you on a video container?
  53. 53.What does inset: 0 mean on an absolutely positioned overlay?
  54. 54.What does grid-auto-flow: dense do?
  55. 55.Why add flex-shrink: 0 to an icon inside a flex row with long text?
  56. 56.How do you push the last item of a flex navbar to the far right?
  57. 57.What does object-position: top do with object-fit: cover?
  58. 58.What is @supports for?
  59. 59.How do you follow the user's system dark theme in plain CSS?
  60. 60.What does color-scheme: light dark on :root do?
  61. 61.What is accent-color for?
  62. 62.What does .field:focus-within match?
  63. 63.How do you change the color of list bullets without touching the text?
  64. 64.How can CSS number headings like "Step 1", "Step 2" automatically?
  65. 65.How do you truncate text to three lines with an ellipsis?
  66. 66.Why is there a small gap under an <img> inside a <div>?
  67. 67.What does transform-origin change?
  68. 68.Why is transition: all 0.3s considered a bad habit?
  69. 69.Why add aria-hidden="true" to a decorative icon next to a button label?
  70. 70.How do you make a screen reader announce "Saved" after an async action without moving focus?
  71. 71.What is needed to make <div role="button"> behave like a real button?
  72. 72.How do you hide a text label visually but keep it for screen readers?
  73. 73.What alt should an icon-only link to the home page have?
  74. 74.How do you style an element based on a data-state attribute in Tailwind?
  75. 75.What does srcset="logo.png 1x, logo@2x.png 2x" do?