olragon.css — classless, drop-in HTML5 styling

🌿 buddingupdated 2026-06-23#css#web#minimalism#classless#dropin

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

Tiếng Việt: olragon.css — CSS thả vào là đẹp.

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

The idea, made literal — raw HTML on top, and right below it exactly how olragon.css renders it. No classes touched; this is the page styling itself.

A quote:

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

Small is legible — a page you can hold in your head is a page you can tend.

A list (note the sprouting markers):

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

seedling
budding
evergreen

A callout — just an <aside>:

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

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.

The rules I followed

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

Make it yours

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.

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