olragon.css: drop it in, skip the classes

A showcase and a short user guide for the stylesheet this whole site runs on.

Tiếng Việt: olragon.css: thả vào là xong, khỏi viết class.

I wrote this file for exactly one page, the one you're reading, and only then realised someone else might use it.

This whole page — the one you're reading — has no CSS classes in its markup. It's plain semantic HTML: <article>, <h2>, <p>, <blockquote>, <ul>. The entire look comes from one small stylesheet, olragon.css, which styles HTML tags directly. Drop it into any semantic page and it just… looks like this.

Drop it in

One line in your <head>, then write normal HTML:

<link rel="stylesheet" href="https://olragon.com/olragon.css">

That's the whole install. No build step, no classes, no JavaScript. Write <h1>, <p>, <blockquote>, <ul>, <figure> — they're already styled. A bare HTML document becomes a warm, readable page.

See it live

Each row: the tag on the left, its markup and the real result on the right. Everything below is the page styling itself — no classes touched.

<h3>A small heading</h3>

<blockquote>Small is legible — a page you can hold in your head is a page you can tend.</blockquote>

<ul><li>seedling</li><li>budding</li><li>evergreen</li></ul>

<aside>Change a few CSS variables and the whole mood shifts with them.</aside>

<p>Wrap selectors in <code>:where()</code> for zero specificity.</p>

<p>Here is <a href="#demo">a styled link</a> inside a sentence.</p>

<hr>

<table><tr><th>stage</th><th>icon</th></tr><tr><td>budding</td><td>🌿</td></tr><tr><td>evergreen</td><td>🌲</td></tr></table>

What you get

• A comfortable reading column, system serif type, and a calm "storybook garden" palette.
• Automatic dark mode (it follows the OS).
• Hand-drawn touches: wavy crayon underlines, a squiggle <hr>, sprouting list markers, a drop cap on the first paragraph.
• Gentle motion that respects prefers-reduced-motion — and lives in one block you can delete.

What rules it follows

1. Classless first. Every core style targets a tag, not a class. Your HTML stays clean; the stylesheet does the work.
2. Zero specificity. Every selector is wrapped in :where(), so its weight is 0 — override anything with a single plain rule, no !important wars.
3. System fonts only. No web fonts, no font CDN, no network requests. It uses the serif and mono your device already has.
4. No build, no dependencies. It's one hand-written .css file. Open it, read it, change it.
5. Motion is optional. Every animation lives in one labelled block at the bottom of the file. Delete it for a fully static page.

How to change the colours and fonts

The colors and fonts are CSS variables at the top — change --paper, --ink, --green, --serif, and the whole mood shifts with them. Because specificity is 0, your own rules always win.

It's opinionated on purpose: this is the look of my garden, not a neutral framework. But the bones are generic. If you want a small, honest, dependency-free way to make semantic HTML look cared-for, copy the link above and start writing.

What I do not know is how it holds up outside this garden. I have only tried it on my own pages, with the system fonts on my own machines, so I cannot tell you where it breaks with a longer script or a stranger layout. If you find a crack, I would like to hear about it.

Built by hand for this garden. Yours to use — CC BY 4.0.