60
seconds
Real CSS rules with every hyphen, colon, semicolon and bracket left in: grids, custom properties, media queries and transitions. The test above is already set to CSS.
Each run shuffles real CSS rules together until there are at least 55 pieces to type. Three of them, exactly as they appear:
.card {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
}
}:root {
--accent: hsl(245 72% 62%);
--shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}Typed as tokens: .card { display: grid; gap: 12px; and so on, one Space between each.
Type a piece, press Space and move on. A piece only counts when every character is right, so 2px; without its semicolon is wrong. The clock starts on your first key.
CSS leans on a small set of symbols, over and over. The hyphen is the most common, from property names like grid-template-columns and custom properties like --accent. Then come colons and semicolons, one of each in every declaration, and brackets from functions like minmax() and var():
| Symbol | Name | Share of symbols | Key (US layout) | Finger |
|---|---|---|---|---|
- | Hyphen (minus) | 18% | - | Right little |
: | Colon | 16% | Shift + ; | Right little |
; | Semicolon | 12% | ; | Right little |
{ | Opening brace | 9% | Shift + [ | Right little |
( | Opening bracket | 9% | Shift + 9 | Right ring |
) | Closing bracket | 9% | Shift + 0 | Right little |
} | Closing brace | 9% | Shift + ] | Right little |
. | Full stop (dot) | 7% | . | Right ring |
, | Comma | 3% | , | Right middle |
@ | At sign | 2% | Shift + 2 | Left ring |
The hyphen, colon and semicolon are all right little finger keys on a US keyboard. So in CSS that finger does a lot of the work: keep it light and let it return to its home key between reaches.
display: grid; has the same shape as nearly every declaration. Drill the shape, not the property.180ms, 12px and 0.35 mix the number row with letters. Keep your hands anchored on the home row while the fingers reach.#6366f1 is Shift plus 3 with the left middle finger, then digits and letters.Net words per minute counts correct characters, five to a word, and accuracy counts every key you press. You also see raw WPM, consistency, your slowest pieces and a heatmap of missed keys, saved in your browser.
Real one-line rules: a responsive grid with repeat and minmax, a reduced-motion media query, custom properties on :root, a focus-visible outline, an nth-child selector, a cubic-bezier transition, a linear gradient and an @supports block. They are shuffled into every run.
Property names are joined with hyphens, every declaration ends in a colon and a semicolon, and values mix numbers with units and brackets. The hyphen alone is the most common symbol in these lines. None of it is hard, but it is relentless, so rhythm matters more than raw speed.
No. Each rule is split on spaces and you type the pieces with one space between them. That keeps the focus on the symbols and names rather than on whitespace.
No. This page opens the code test in CSS for this visit only. Your saved code language stays as it was until you choose another in the options above the test.
Typing tests by length: 15 second typing test · 30 second test · 1 minute typing test · 2 minute test · 5 minute typing test · 10 minute test · custom text
In other languages: Spanish typing test · French typing test · German typing test · Portuguese typing test · Italian typing test · Test de mecanografía en español · Teste de digitação em português