Your screen's device pixel ratio and hairlines
Zoom the page in and out (Ctrl/Cmd and + or -) and run again: the ratio changes. On a DPR 2 or 3 screen the 0.5px line is thinner than the 1px one; on DPR 1 they look the same.
A CSS pixel (px) is an agreed reference size, not one dot on your screen; the browser maps it to real device pixels using the device pixel ratio, and every other absolute unit (in, cm, mm, pt, pc) is a fixed number of CSS pixels.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write CSS for a .stamp box that is exactly 2in wide and 1in tall, with a 2pt solid border. What are its sizes in pixels?
Write a print stylesheet that sets the body text to 12pt, page margins to 1.5cm, and hides any element with class no-print.
Explain it without notes
What is a CSS pixel, and how is it different from a device pixel?
What does the device pixel ratio tell you, and what changes it?
Why are cm and in unreliable on screens but fine in print?
When is px the right unit, and when should you avoid it?
Preview
Console
Nothing logged yet.