Practical lab: build a small theme system
Combine tokens, layout and interaction styles in one realistic stylesheet.
- Compose multiple CSS concepts in one workflow
- Build deterministic card-grid styling rules
- Apply reusable interaction patterns
Real styling work combines multiple fundamentals: reusable tokens, layout rules, typography and interactive states. This lab mirrors that workflow in a compact component set.
1:root {
2 --brand: #165b33;
3 --surface: #f4f8f5;
4}
5
6.cards {
7 display: grid;
8 grid-template-columns: repeat(2, 1fr);
9 gap: 16px;
10}
11
12.card {
13 background: var(--surface);
14 color: var(--brand);
15}Two themed cards with consistent spacing and color
By standardizing key values and selectors, you make future changes easier and safer. A small, clear stylesheet can scale better than many ad-hoc overrides.
Key takeaways
Practical CSS combines composition and consistency.
Shared tokens reduce maintenance effort.
Predictable selectors and spacing improve scalability.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write CSS
Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.
Theme a small card grid
Define --brand and --surface in :root. Make .cards a 2-column grid with 16px gap. Style .card background with var(--surface) and text color with var(--brand).
- Theme grid styles
Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…