CSS Quiz
Before previewing, predict this card content width. The border-box width includes forty pixels of horizontal padding and four pixels of border, leaving 236 pixels for content.
How it works
- Use this page as a starting point for your own work: change the content, make a prediction, then inspect the result.
- Before considering a solution finished, test keyboard navigation, narrow widths, readable contrast, and longer text.
Practice checkpoints
A card has width 280px, padding 20px, border 2px, and border-box. What is its content width?
236 pixels: subtract both padding edges and both borders from 280.
Does a class selector always outrank a type selector?
Not across every cascade context. Compare origin, importance, and layer precedence before specificity.
What does gap add around the outside of a grid?
Nothing. Gap creates gutters between tracks; padding creates space at the container edge.
Does order change keyboard focus order?
No. A sensible DOM order remains essential when a layout is visually reordered.
Which property fades the whole card including its text?
Opacity affects the whole rendered group. An alpha background changes only the background.
Why use min-width: 0 on a flex item?
It can let an item shrink past its automatic content minimum when the content is allowed to wrap or overflow appropriately.
A practical example
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<div class="layout"><article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article><article class="card"><span class="badge">This Saturday</span><h2>Build a bird box</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article><article class="card"><span class="badge">This Saturday</span><h2>Mend a favourite shirt</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article></div>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.card { width: 280px; padding: 20px; border: 2px solid #8ca590; box-sizing: border-box; }
Before previewing, predict this card content width. The border-box width includes forty pixels of horizontal padding and four pixels of border, leaving 236 pixels for content.