water.css

Water.css is a tiny CSS file you can add to any webpage to instantly improve how it looks, without touching a single HTML element or writing any custom styles. The project was created for developers who need to build a quick demo page or simple website and want it to look presentable without investing time in visual design.

The way it works is simple: you add one line to the head of your HTML file, pointing to the Water.css stylesheet hosted on a content delivery network. From that point on, the page's default headings, paragraphs, buttons, forms, tables, links, and code blocks all get cleaner and more readable styling applied automatically. No class names to add, no configuration required.

Water.css ships in three versions. The automatic version detects whether your device is set to light or dark mode and switches accordingly. The light and dark versions are fixed and stay the same regardless of device settings. Each version is available in a compressed form for production use and an uncompressed form that is easier to read during development.

The stylesheet is built using CSS variables, sometimes called custom properties. This means you can override individual colors or spacing values by adding your own stylesheet after Water.css in the HTML. If you want a different link color or a custom background, you set the relevant variable in your own style block and it takes effect without modifying Water.css itself. For older browsers that do not support CSS variables, there is a compile-your-own-theme path that involves cloning the repository, editing source files, and rebuilding the output files with a provided build command.

The project is small in file size by design. It targets broad browser support, including older devices, and most basic HTML elements are styled without any extra work from the developer. It is open source under the MIT license and welcomes contributions.