CSS typing practice
Copy selectors, declarations and units from small CSS samples. Keep braces and semicolons consistent without applying styles to the website.
Preview this exercise · 16 words · 111 characters
.sample { color: #172033; padding: 16px; border-radius: 12px; } .caption { font-size: 1rem; line-height: 1.6; }
Type the displayed passage in order. Backspace corrects the last character. Paste is disabled. Escape pauses. Control or Command plus Enter restarts. Leaving the input pauses the timer.
How to practise css typing
Read one declaration at a time: property, colon, value and semicolon. Hyphenated property names need attention between their parts. These samples are inert targets rather than a full design system. The engine collapses whitespace, so this exercise does not assess code indentation or formatting preferences.
What to check after a run
Check value units after the number. A copied declaration can look complete while missing px, rem or the closing semicolon.
Read the three original exercises
Preview the exact targets before choosing a run. Counts include spaces and punctuation after whitespace normalisation.
1. Find the pattern
.sample { color: #172033; padding: 16px; border-radius: 12px; } .caption { font-size: 1rem; line-height: 1.6; }
2. Connect the movement
.library-card { display: grid; gap: 12px; background: #f8f9fc; border: 1px solid #d9dfeb; } .library-card:hover { border-color: #345cf5; }
3. Apply it in context
@media (max-width: 600px) { .sample-grid { grid-template-columns: 1fr; gap: 16px; } } @media (prefers-reduced-motion: reduce) { .sample-card { transition: none; } }
Original practice lesson added 26 October 2026. Educational transcription practice; no professional assessment or qualification.