Assessment 2 CSS and layout Answer guide

Each answer is a scoring guide, not the only acceptable wording. Score the technical conclusion (2), explanation (2), and requested evidence or clarity (1). A correct guess without reasoning earns at most the conclusion points.

Question 1

Maroon wins because the matching class selector has greater specificity than p. Later source order only breaks an applicable tie. State ordinary normal author rules with no important declarations, inline styles, layers or other priority mechanisms affecting this example.

Question 2

Content-box total is 280 + 24 + 4 = 308px. With border-box, the outer border box is 280px and content is 252px. Margin, if present, remains outside. Credit requires showing the arithmetic.

Question 3

Flexbox suits the header’s one-dimensional sequence and wrapping. Grid suits shared card columns across rows. Alternatives can receive credit if justified with working behavior, but “Grid is newer” is not a sufficient reason.

Question 4

Two gaps use 36px; 804px remains. Each track receives 268px, assuming no additional constraints. Do not count an outer gap or divide the full viewport width.

Question 5

Long titles, translation, zoom, or added details can be clipped or unreachable. Allow height to grow and use layout alignment rather than discarding content. Full credit describes a concrete stress test, such as a longer title at 200% zoom.

Question 6

The container should be .header-row/.nav-list or .event-grid, with the intended direct children becoming layout items. .event-card styles repeated articles. Wrong-parent placement arranges a different set of direct children, often heading/paragraph/wrapper instead of cards. Evidence should come from actual inspected markup.

Use the result

For a missed question, return to the related lesson and apply the concept to a different event or different numeric values. Keep your first attempt so you can see what changed in your reasoning.

Return to assessment