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

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.

h1–h3

Headings — serif, tight, hand-underlined.

<h3>A small heading</h3>

A small heading

blockquote

A pulled-out quote with a soft, hand-drawn edge.

<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.

ul · li

Lists with little sprouting markers.

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

seedling
budding
evergreen

aside

A calm callout — just an <aside>.

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

code

Inline code, gently tinted.

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

Wrap selectors in :where() for zero specificity.

a

Links with a wavy crayon underline.

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

Here is a styled link inside a sentence.

hr

A squiggle divider, not a hard line.

<hr>

table

Tables, quietly lined.

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

stage	icon
budding	🌿
evergreen	🌲

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.