Web Development HTML and CSS 4 — Questions and Answers
Question 1: Which CSS property prevents a flex or grid item from shrinking below its content size?
- flex-shrink: 0 (Correct answer)
- overflow: hidden
- min-width: auto
- flex-grow: 0
Correct answer: flex-shrink: 0
Setting `flex-shrink: 0` prevents the item from shrinking when space is limited, keeping it at its natural size.
Question 2: What does the HTML `download` attribute on an `<a>` tag do?
- Prompts the browser to download the linked file instead of navigating to it (Correct answer)
- Sets the download speed limit
- Forces the file to open in a new tab
- Triggers a JavaScript download event
Correct answer: Prompts the browser to download the linked file instead of navigating to it
The boolean `download` attribute tells the browser to treat the href as a downloadable file, optionally using the attribute's value as the filename.
Question 3: Which CSS value for `position` removes an element from the normal document flow and positions it relative to the viewport?
- fixed (Correct answer)
- absolute
- relative
- sticky
Correct answer: fixed
`position: fixed` takes an element out of the flow and anchors it to the viewport, so it does not scroll with the page.
Question 4: What is the correct way to add an external CSS file to an HTML document?
- <link rel="stylesheet" href="styles.css"> (Correct answer)
- <style src="styles.css">
- <css href="styles.css">
- <import src="styles.css">
Correct answer: <link rel="stylesheet" href="styles.css">
The `<link>` tag with `rel="stylesheet"` in the `<head>` section is the standard method for attaching an external CSS file.
Question 5: Which CSS property creates space inside an element's border, between the border and the content?
- padding (Correct answer)
- margin
- border-spacing
- inset
Correct answer: padding
Padding adds space between an element's content and its border, inside the box.
Question 6: Which HTML5 input type provides a native date picker in most modern browsers?
- type="date" (Correct answer)
- type="datetime"
- type="calendar"
- type="datepicker"
Correct answer: type="date"
`<input type="date">` renders a native date picker control in supported browsers.
Question 7: In CSS, what does `overflow: hidden` do when applied to a container?
- Clips any content that extends beyond the container's bounds (Correct answer)
- Hides the entire container
- Adds a scrollbar automatically
- Collapses the container to zero height
Correct answer: Clips any content that extends beyond the container's bounds
`overflow: hidden` hides any part of child content that exceeds the container's width or height.
Web Development HTML and CSS 4
Which CSS property prevents a flex or grid item from shrinking below its content size?