Web Development HTML and CSS 5 — Questions and Answers
Question 1: Which CSS at-rule is used to apply styles only when the viewport meets a specific condition such as minimum width?
- @media (Correct answer)
- @viewport
- @screen
- @breakpoint
Correct answer: @media
`@media` queries let you conditionally apply CSS rules based on device characteristics like viewport width, resolution, or orientation.
Question 2: What is the semantic difference between `<strong>` and `<b>` in HTML5?
- <strong> conveys importance while <b> is purely stylistic bold (Correct answer)
- They are identical in HTML5
- <b> is deprecated and invalid
- <strong> is only for screen readers
Correct answer: <strong> conveys importance while <b> is purely stylistic bold
`<strong>` carries semantic weight indicating the text is of strong importance, whereas `<b>` only implies a stylistic offset with no added importance.
Question 3: Which value of `display` makes an element behave like a block but allows setting width and height while keeping it inline?
- inline-block (Correct answer)
- inline-flex
- block-inline
- flex-inline
Correct answer: inline-block
`display: inline-block` combines inline flow (sits alongside other inline elements) with block-level sizing (respects width/height).
Question 4: What does CSS specificity determine?
- Which rule wins when multiple conflicting selectors target the same element (Correct answer)
- How quickly CSS loads
- The order in which styles are downloaded
- Whether a property is inherited
Correct answer: Which rule wins when multiple conflicting selectors target the same element
Specificity is a weight calculated from the types of selectors used; the rule with the highest specificity overrides conflicting rules.
Question 5: Which HTML element represents a navigation landmark containing primary site links?
- <nav> (Correct answer)
- <menu>
- <aside>
- <header>
Correct answer: <nav>
`<nav>` is a semantic landmark element intended for blocks of navigation links, aiding screen readers and SEO.
Question 6: In CSS, what does `transition: all 0.3s ease` do?
- Animates all changing CSS properties over 0.3 seconds using an ease timing function (Correct answer)
- Instantly applies all property changes after a 0.3 second delay
- Loops all animations 3 times
- Applies the transition only to opacity
Correct answer: Animates all changing CSS properties over 0.3 seconds using an ease timing function
The `transition` shorthand specifies the property, duration, and timing function for smooth state changes triggered by CSS changes.
Question 7: What is the purpose of the `alt` attribute on an `<img>` element?
- It provides alternative text for screen readers and when the image fails to load (Correct answer)
- It sets a tooltip on hover
- It specifies a fallback image URL
- It defines the image loading priority
Correct answer: It provides alternative text for screen readers and when the image fails to load
The `alt` attribute supplies a text description of the image used by assistive technologies and displayed when the image cannot be rendered.
Web Development HTML and CSS 5
Which CSS at-rule is used to apply styles only when the viewport meets a specific condition such as minimum width?