Style sheets only.

The same HTML document every time, byte for byte, except one stylesheet link. After the CSS Zen Garden, which had the idea first.

1. Workshop standard Custom properties and grid
2. Under construction steps() and tiled gradients
3. Level zero Layered gradients
4. Sardine-tin sea radial-gradient and border-radius
5. Green screen ch units and text-shadow
6. Late edition Multi-column layout
7. Gradients all the way down Repeating conic gradients
8. Cut paper clip-path
9. For the printer @page and paged media
10. High contrast forced-colors and prefers-contrast
11. No pictures System colours, no images
12. Blueprint Background grids and outlines
13. Load-bearing Almost nothing
14. International style Subgrid
15. Opening night Gradients and text-shadow
16. Wound daily @property and conic gradients
17. Night drive 3D transforms
18. Illuminated ::first-letter and text-wrap
19. After hours color-scheme and light-dark()
20. Shelves Container queries
21. Index cards scroll-snap
22. Photocopied zine Blend modes and transforms
23. Till receipt Dotted leaders with flexbox
24. Sketchbook Elliptical border-radius

Tabs, a modal, a carousel, noughts and crosses with a referee, an adder and a cellular automaton that is, with your help, Turing complete. Each page shows the CSS that does it and says where the trick is worse for accessibility than a script would be.

1. Tabs, from radio buttons Three tabs, three radio buttons, one sibling combinator. :checked + ~
2. One drawer at a time An exclusive accordion. The HTML does it; CSS dresses it. <details name>
3. A modal with no script One with popover, one with :target. Only one of them is good. popover :target
4. A carousel on rails Scroll-snap does the sliding; links or CSS-made dots do the picking. scroll-snap ::scroll-marker
5. Tooltips that know where they are Anchor positioning puts the tip by its word, and flips it at the edge. anchor positioning :has()
6. The big light A dark mode switch: one checkbox and :root:has(). :has()
7. A form that tells you off, politely Errors that wait until you’ve had a go, with :user-invalid. :user-invalid :has() CSS counters
8. Keeping score A checklist that counts itself with CSS counters. CSS counters :has()
9. A four-bit adder Binary addition with carries, worked out by :has(). :has() CSS counters
10. Reading progress A progress bar whose clock is the scroll position. scroll-driven animations @property
11. Depth Parallax from perspective alone. No scroll listener. 3D transforms
12. Noughts and crosses Two players, 81 checkboxes and a referee made of :has(). :has() :checked + ~
13. The stockroom maze Rooms are :target sections; exits are links. :target :has()
14. A clock that can’t tell the time Hands and digits from @property integers. It starts at zero. @property CSS counters
15. A slideshow that plays itself @keyframes for the playing; radio buttons for the picking. :checked + ~ :has()
16. The lamp, drawn One element, two pseudo-elements, a lot of gradients. conic and radial gradients :checked + ~
17. Rule 110 A Turing-complete cellular automaton. You are the clock. :checked + ~