Style a card without guessing
Use CSS selectors and the box model to style a predictable learning card, then return to your saved practice after sign-in.
Start with the idea01
A selector is a precise instruction.
CSS starts by choosing which elements receive a rule. A class selector begins with a dot, so .learning-card targets every element carrying class="learning-card".
.learning-card {
color: #17231e;
background: #ffffff;
}02
Combine selectors to keep a rule local.
A space means “inside.” The selector .learning-card strong reaches <strong> elements inside the card without changing every strong element on the page.
.learning-card strong {
color: #175437;
}Find a <strong> element, then check whether it sits inside .learning-card. This habit makes longer selectors easier to reason about.
03
The box model explains the space you see.
Every element has content, padding, border, and margin. Padding creates space inside the edge. Margin separates the whole box from its neighbours.
By default, a declared width covers only the content. Add box-sizing: border-box when the padding and border should stay inside that width.
Five-minute practice
Make the card predictable before making it pretty.
Complete the saved CSS block below. The checks look for two scoped selectors and the box-model choices that keep the card at 280px.
Saved practice · CSS box model
Make one card hold its shape.
Finish the two selectors, keep padding inside the declared width, and give the card a visible edge. The preview updates as you type.
Practice checks
Four choices, checked on the server.
Keep the card declarations inside a .learning-card selector.
Use .learning-card strong so the emphasis stays scoped to this component.
Add box-sizing: border-box to .learning-card.
Add padding and a non-zero border to .learning-card so the box is easy to read.
Starter CSS is ready. Save when the card feels predictable.
More repetition, same model
Use six short challenges to make the pattern stick.
Practice selectors, spacing, box sizing, and reusable link targets with exact feedback after every attempt.
Active recall
Check your mental model.
Answer from memory. You can choose all four answers before deciding whether to check them.