Style without breaking readability

15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.

CSS selectors choose elements and declarations change their presentation. Predict what changing padding does to the card’s interior. Compare it with margin outside the border. Resize the preview and keep text readable without horizontal scrolling. Test keyboard focus on the button. Color alone must not communicate a pass or failure.

<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Agila study</title>
<style>body{font:1.1rem system-ui;margin:2rem;background:#f4f2fb;color:#21143e} main{max-width:40rem;margin:auto;padding:1.5rem;background:white;border:2px solid #56329a;border-radius:12px}button{padding:1rem}</style>
<main><h1>My study plan</h1><p>Resize the preview. Keep this text readable.</p><button>Start</button></main></html>

Practice and evidence

Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.