What is Water.css?

Updated

Water.css is a drop-in CSS stylesheet for simple static websites. You write plain semantic HTML, add one <link> tag, and the stylesheet handles the visual design for you — no classes, no build step, no configuration. It suits small static sites, documentation pages, README-style demos, and prototypes where you want readable defaults without writing CSS yourself.

How it works

The core idea is that Water.css targets bare HTML elements rather than class names. Headings, paragraphs, tables, forms, code blocks, and dialogs all get styled automatically as soon as the stylesheet loads. Because you never add classes, your markup stays portable — you can remove Water.css later and the HTML still works.

Installation

Paste the stylesheet link into the <head> of your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

The site provides a copy-to-clipboard button for the snippet, plus theme options:

Option What it does
Automatic Follows the visitor's system dark/light preference
Dark theme Forces the dark variant
Light theme Forces the light variant

Version and file-size information (minified + gzipped) is listed alongside these options, so you can check the weight before committing to it.

Goals

The project states its design goals explicitly:

  • Responsive
  • Good code quality
  • Good browser support
  • Small size (under 2kb)
  • Beautiful
  • No classes

These goals explain most of the trade-offs. The stylesheet stays small and broadly compatible by avoiding elaborate layout systems, which is also why it works well on mobile.

Is it responsive?

Yes. Water.css deliberately avoids fancy layout styles, so it adapts easily to mobile. The site notes that you just need the standard responsive viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

With that in place, content flows naturally at any width.

Bookmarklet

Water.css ships a bookmarklet called Waterize. It's a small JavaScript snippet you drag to your bookmarks bar; clicking it on any page replaces that page's styles with Water.css. The stated purpose is making ugly websites more readable. This is a quick way to preview how the stylesheet handles real-world markup before you adopt it.

What gets styled

The demo page exercises a wide range of elements, which tells you what to expect out of the box:

  • Form elements — text inputs, read-only fields, disabled inputs, selects, radio buttons, checkboxes
  • Code — inline code and preformatted blocks, including scrollbars for overflow
  • Tables — headers and rows with sensible spacing and borders
  • <details> / <summary> — collapsible sections
  • <dialog> — modal dialogs, including forms and menus inside them
  • Typography — headings, paragraphs, and body text

If your page is built from standard semantic elements, it will look consistent without any extra work.

When to use it

Water.css fits when you want a clean, readable page and don't want to think about CSS. It's a poor fit if you need custom layouts, component-level design systems, or utility-class workflows — the "no classes" goal means there's no class API to hook into. For a small static site, a personal notes page, or a quick demo, it removes the styling step entirely.