A page has a long article. The developer wants a table of contents (TOC) that stays visible in the sidebar while the user scrolls through the article, but only while the TOC's containing sidebar is in view. When the user scrolls past the sidebar's bottom edge, the TOC should scroll away with the page. Which `position` value should the TOC use?

`position: relative` with `top: 20px`

`position: absolute` with `top: 20px`

`position: sticky` with `top: 20px`

`position: fixed` with `top: 20px`

What is the purpose of using flexible images in responsive design?

To compress images to reduce file size

To ensure images are always displayed at their original resolution

To allow images to scale up and down within their containing element

To load different images based on device type

LPI Web Development Essentials

Domain 3Objective 4

033.4 CSS Box Model and Layout (weight: 2) WEB-DEVELOPMENT-ESSENTIALS Practice Questions (Page 5)

Part of the 033 CSS Content Styling domain, which makes up ~25% of our current practice bank. Linux Professional Institute does not publish an official question count, but from its 60-minute exam (~25–40 total, ~6–10 in this domain), expect 2–3 from this objective — we provide 34 practice questions to prepare you well beyond it. (estimate)

34questions here

7free pages

9concepts

Questions 21–25

21expert · hard
A page has a long article. The developer wants a table of contents (TOC) that stays visible in the sidebar while the user scrolls through the article, but only while the TOC's containing sidebar is in view. When the user scrolls past the sidebar's bottom edge, the TOC should scroll away with the page. Which `position` value should the TOC use?
Select an answer first
22application · medium
A developer has a grid container with `display: grid` and three columns. Each grid item contains text of varying lengths. The design requires all items to be vertically centered within their grid area. Which property should be set on the grid container?
Select an answer first
23application · medium
An article page has an image floated left. The paragraph that follows the image wraps around it as intended, but the next section heading appears beside the image instead of below it. Which CSS should be applied to the heading to force it to start on a new line below the floated image?
Select an answer first
24foundation · easy
If an element has a width of 200px, padding of 10px on each side, and a border of 2px on each side, what is the total space it occupies horizontally (excluding margin)?
Select an answer first
25foundation · easy
What is the purpose of using flexible images in responsive design?
Select an answer first

Finished these 5 questions?

Review the revealed explanations, or continue through the curriculum.

Next 5 questions →Back to WEB-DEVELOPMENT-ESSENTIALS

Free Basic Practice is a study aid with revealable answers — not a scored exam. Examers.io is independent and not affiliated with or endorsed by Linux Professional Institute. “WEB-DEVELOPMENT-ESSENTIALS” is a trademark of its owner, used for identification only.

033.4 CSS Box Model and Layout (weight: 2) WEB-DEVELOPMENT-ESSENTIALS Practice Questions (Page 5)

Questions 21–25

A developer has a grid container with `display: grid` and three columns. Each grid item contains text of varying lengths. The design requires all items to be vertically centered within their grid area. Which property should be set on the grid container?

An article page has an image floated left. The paragraph that follows the image wraps around it as intended, but the next section heading appears beside the image instead of below it. Which CSS should be applied to the heading to force it to start on a new line below the floated image?

If an element has a width of 200px, padding of 10px on each side, and a border of 2px on each side, what is the total space it occupies horizontally (excluding margin)?

What is the purpose of using flexible images in responsive design?

Keep studying — 033 CSS Content Styling