← All topics

HTML & CSS Junior interview questions and answers

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

Take this quiz
  1. 1.Why do HTML documents start with <!DOCTYPE html>?
  2. 2.Which set contains only HTML5 semantic elements?
  3. 3.How many visible <main> elements can a page have, and what is it for?
  4. 4.How does <div> differ from <span> by default?
  5. 5.You set width: 200px; height: 50px on a <span> with no other styles. What happens?
  6. 6.How does display: inline-block differ from inline?
  7. 7.How do you read the value of the data-user-id="42" attribute in JavaScript?
  8. 8.What is the main difference between the id and class attributes?
  9. 9.Why add rel="noopener noreferrer" to a link with target="_blank"?
  10. 10.What is the default type of a <button> inside a <form>?
  11. 11.Why link a <label> to an <input> with for and id?
  12. 12.What alt should a purely decorative image (e.g. a divider ornament) have?
  13. 13.What does box-sizing: border-box do?
  14. 14.How does padding differ from margin?
  15. 15.Two blocks are stacked. The top one has margin-bottom: 20px, the bottom one margin-top: 30px. What is the gap between them?
  16. 16.Both selectors set color on the same link. Which wins: #nav a or .menu .item a.link?
  17. 17.Which of these properties is inherited by child elements by default?
  18. 18.How does display: none differ from visibility: hidden?
  19. 19.How does an element with position: relative; top: 10px behave?
  20. 20.What is an element with position: absolute positioned relative to?
  21. 21.How does position: sticky; top: 0 work?
  22. 22.Which elements does z-index apply to?
  23. 23.How does rem differ from em?
  24. 24.What is 50vw equal to?
  25. 25.How are media queries usually written with a mobile-first approach?
  26. 26.Why do you need <meta name="viewport" content="width=device-width, initial-scale=1">?
  27. 27.Along which axis does justify-content align items in a flex container?
  28. 28.A container has display: flex; flex-direction: column; justify-content: center. How are its children aligned?
  29. 29.What does flex-wrap: wrap do?
  30. 30.What's the simplest way to space flex items evenly without adding space after the last one?
  31. 31.Which approach correctly centers a block horizontally and vertically inside its parent?
  32. 32.What does grid-template-columns: repeat(3, 1fr) define?
  33. 33.How do you make a grid item span the full width of the grid regardless of the number of columns?
  34. 34.How does a pseudo-class differ from a pseudo-element?
  35. 35.How do you make the last item of a list of any length red without JavaScript?
  36. 36.Why doesn't a ::before with only width, height and background show up?
  37. 37.How do you correctly declare and use a CSS variable?
  38. 38.What do the last two digits in the color #3366ff80 mean?
  39. 39.When is it better to use <img> rather than background-image?
  40. 40.Why have heading levels <h1>–<h6> if size can be set with CSS?
  41. 41.When should you use <a> and when <button>?
  42. 42.What is the <dl> list for?
  43. 43.A form is submitted with the GET method. Where does the field data go?
  44. 44.What does <input type="email"> give you compared with type="text"?
  45. 45.What does the required attribute do on a form field?
  46. 46.What is the utility-first approach in Tailwind CSS about?
  47. 47.What does the md:flex class mean in Tailwind?
  48. 48.What does p-4 equal in Tailwind with the default configuration?
  49. 49.How do you change a button's background on hover in Tailwind?
  50. 50.How does the dark: variant work by default in Tailwind v4?
  51. 51.When should you use <article> rather than <section>?
  52. 52.How does <strong> differ from <b>?
  53. 53.What happens if you put a <div> inside a <p> in HTML?
  54. 54.When is <table> the right choice?
  55. 55.What is sent to the server for an unchecked checkbox?
  56. 56.Why isn't placeholder a replacement for <label>?
  57. 57.How should a group of related radio buttons be marked up?
  58. 58.What are <figure> and <figcaption> for?
  59. 59.How does overflow: auto differ from overflow: scroll?
  60. 60.Why doesn't text-align: center center a <div> with a fixed width inside its parent?
  61. 61.Why is a unitless line-height: 1.5 usually better than line-height: 24px?
  62. 62.How does opacity: 0.5 on a card differ from background: rgb(0 0 0 / 0.5)?
  63. 63.How do you apply hover styles only on devices that can actually hover?
  64. 64.What is the difference between .menu a and .menu > a?
  65. 65.Which element does h2 + p select?
  66. 66.What does input[type="email"] select?
  67. 67.Why is img { max-width: 100%; height: auto; } a common base rule?
  68. 68.What does margin: 10px 20px set?
  69. 69.How do you make a square avatar image a circle?
  70. 70.Why end a font-family list with a generic family like sans-serif?
  71. 71.What is the accessibility risk of reordering flex items with order?
  72. 72.Why do flex items in a row have equal height by default?
  73. 73.Which style wins: a rule in a stylesheet or the inline style attribute?
  74. 74.What does class="hidden md:block" do in Tailwind?
  75. 75.Why set the lang attribute on <html>?