Web Development HTML and CSS 3 — Questions and Answers
Question 1: Which CSS unit is relative to the font-size of the root `<html>` element?
- rem (Correct answer)
- em
- vw
- ch
Correct answer: rem
`rem` (root em) is always relative to the font-size set on the `<html>` element, making it predictable regardless of nesting.
Question 2: What is the purpose of the HTML `<meta charset="UTF-8">` tag?
- It declares the character encoding the browser should use to interpret the document (Correct answer)
- It sets the page language
- It prevents XSS attacks
- It specifies the viewport size
Correct answer: It declares the character encoding the browser should use to interpret the document
The charset meta tag tells the browser which encoding to use when reading the HTML bytes, ensuring characters render correctly.
Question 3: In CSS Grid, what does `grid-template-columns: repeat(3, 1fr)` create?
- Three equal-width columns that share the available space (Correct answer)
- Three columns each 1 pixel wide
- A grid with 3 rows
- Three columns each 100% wide
Correct answer: Three equal-width columns that share the available space
`1fr` is a fractional unit; three of them divide the available track space into three equal columns.
Question 4: Which HTML tag produces a thematic break (horizontal rule) between sections?
- <hr> (Correct answer)
- <br>
- <sep>
- <divider>
Correct answer: <hr>
`<hr>` represents a thematic break in content and renders as a horizontal line by default.
Question 5: What CSS property makes text lowercase regardless of how it is typed in HTML?
- text-transform: lowercase (Correct answer)
- font-case: lower
- text-style: lowercase
- letter-case: small
Correct answer: text-transform: lowercase
`text-transform: lowercase` converts all characters in the element to lowercase at render time without changing the source HTML.
Question 6: Which attribute on an `<a>` tag opens the linked URL in a new browser tab?
- target="_blank" (Correct answer)
- target="_new"
- rel="new"
- open="tab"
Correct answer: target="_blank"
`target="_blank"` instructs the browser to open the href in a new browsing context (tab or window).
Question 7: In CSS, what does the `::before` pseudo-element do?
- Inserts generated content as the first child of the selected element (Correct answer)
- Selects the element that appears before another in the DOM
- Applies styles before the page loads
- Targets the element's previous sibling
Correct answer: Inserts generated content as the first child of the selected element
`::before` creates a pseudo-element that becomes the first child of the selector and can display content via the `content` property.
Web Development HTML and CSS 3
Which CSS unit is relative to the font-size of the root `` element?