How do I install and use Water.css in my HTML?

Water.css is a drop-in CSS file: you add one <link> tag to the <head> of your HTML, and it styles your existing semantic HTML without classes, a build step, or JavaScript. It fits simple static sites and plain HTML pages where you want readable defaults with almost no setup.

Installation

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

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

The site's Installation section describes this as the whole process: "Paste this into the of your HTML" (the <head>), with a copy-to-clipboard button for the snippet. There is no package install, bundler config, or script to run.

Theme options

Water.css ships three variants. Pick one link tag depending on how you want the theme handled:

Use the automatic version if you want the page to match the user's OS setting, and a fixed theme if you need consistent appearance regardless of system preference.

What you get

• No classes. You write normal semantic HTML (<table>, <form>, <dialog>, <details>, headings, code blocks) and Water.css handles the styling.
• Responsive by default. The site states it includes no fancy styles, so it is "easily mobile responsive." Add the standard viewport meta tag and it adapts as you resize.
• Small. The stated goal is under 2kb minified and gzipped, alongside goals of good code quality, good browser support, and a "beautiful" result.
• No JavaScript required for the styling itself.

Verify it worked

Open your page in a browser. Unstyled HTML should now show styled headings, tables with borders, formatted form inputs, and readable code blocks. Resize the window or open it on a phone: content should reflow cleanly. If nothing changes, check that the <link> is inside <head> and that the URL loads directly in a browser tab.

Common snags

• Missing viewport tag. Responsiveness depends on the standard <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, mobile rendering may not scale as expected.
• Your own CSS overriding it. Load Water.css first, then your custom styles, so your rules win where they overlap.
• Expecting a framework. Water.css is a stylesheet, not a component library. It styles elements you already have; it does not add layout systems or interactivity.

Try it on an existing page

The site offers a Waterize bookmarklet: a JavaScript snippet you drag to your bookmarks bar. Clicking it on any page replaces that page's styles with Water.css, which is a quick way to preview how the stylesheet treats real markup before committing to it.