Web Development HTML and CSS 2 — Questions and Answers
Question 1: Which CSS property controls the stacking order of overlapping elements?
- z-index (Correct answer)
- stack-order
- layer
- depth
Correct answer: z-index
The z-index property sets the stack order of a positioned element; higher values appear on top.
Question 2: What does the HTML `<figure>` element semantically represent?
- Self-contained content like images or diagrams with an optional caption (Correct answer)
- A decorative border around images
- A placeholder for dynamic content
- A full-width hero banner
Correct answer: Self-contained content like images or diagrams with an optional caption
`<figure>` wraps self-contained media content (images, code, charts) that can be referenced from the main flow.
Question 3: Which CSS selector targets an element only when it is the last child of its parent?
- :last-child (Correct answer)
- :last-of-type
- :nth-last-child(1)
- :final-child
Correct answer: :last-child
:last-child matches an element that is the very last child node of its parent.
Question 4: What is the correct HTML attribute to make a form input field required before submission?
- required (Correct answer)
- mandatory
- validate
- nonempty
Correct answer: required
The boolean `required` attribute on an input triggers built-in browser validation and prevents form submission if the field is empty.
Question 5: In CSS Flexbox, which property defines the main axis direction?
- flex-direction (Correct answer)
- justify-content
- align-items
- flex-flow
Correct answer: flex-direction
`flex-direction` sets whether flex items are placed in a row or column, establishing the main axis.
Question 6: Which HTML element is used to embed an inline scalable vector graphic without an external file?
- <svg> (Correct answer)
- <canvas>
- <embed>
- <object>
Correct answer: <svg>
The `<svg>` element lets you write SVG markup inline within HTML, making it directly part of the DOM.
Question 7: What does `box-sizing: border-box` change about the CSS box model?
- Padding and border are included in the element's total width and height (Correct answer)
- The margin is included in the width
- The element ignores its padding entirely
- The border is rendered outside the specified width
Correct answer: Padding and border are included in the element's total width and height
With `border-box`, padding and border widths are subtracted from the content area so the element's total size matches the declared width/height.
Web Development HTML and CSS 2
Which CSS property controls the stacking order of overlapping elements?