Assessment 2 CSS and layout

After module 07. Provisional time: 30–45 minutes.

Six questions, five points each. Attempt without opening the answer guide. You may inspect your own files and run tests. Save your answers in a local text file or learning log. Do not submit real information or publish a site.

1. For a p with class="notice", ordinary same-layer author CSS contains p {color: navy}, .notice {color: maroon}, then p {color: green}. Which color wins and why? State the assumptions.
2. A card has content-box width 280px, 12px padding on each side, and 2px borders. Find its border-box width. What changes if it uses border-box with the same declared width?
3. You need a site name and wrapping navigation along a row, then event cards aligned in rows and columns. Choose a layout system for each and explain the relationship it expresses.
4. A grid has 840px of content width, three equal fractional tracks, and 18px gaps. Calculate the track width.
5. A classmate gives every card height: 180px and hides overflow to make the row neat. Explain two likely failures and a safer approach.
6. In your own working project, show a rule that selects a direct layout container and one that styles a repeated card. Describe what happens when display:flex or grid is placed on the wrong parent.

Use the learner guide’s 2 + 2 + 1 scoring convention. Suggested readiness is 24/30 with no critical form-data or accessibility misunderstanding. Open the separate answer guide after attempting.