CSS foundations · six saved challenges
Practice the box until you can predict it.
Build one reusable learning card through selectors, spacing, box sizing, and scoped component rules. Each step gives exact feedback.
Start CSS practiceOne card, six decisions
Move from selector to reusable component.
6 beginner challenges
No setup required
01Select one cardOnly the learning card gets a white surface and dark text.Class selectorsOpen02Scope the lesson countThe lesson count becomes green and bold while other emphasis stays unchanged.Descendant selectorsOpen03Keep the width predictableThe finished card stays 280px wide, including padding and border.Box sizingOpen04Separate inside from betweenThe card has 24px inner space and the paragraph starts 12px below its heading.Padding and marginOpen05Build a clear link targetThe card link gets an inline block, comfortable padding, and rounded corners.Nested class selectorsOpen06Center a reusable cardThe stage card centers itself and never grows beyond 280px.Compound contextOpen