Why TagBrush.css?

Build your theme

Every component on this page reads from a handful of CSS variables. Change them here and the whole page updates live, then copy the CSS into your site or share a link to your theme. Hover colors, focus rings, and button text are derived from --color-primary automatically: buttons switch between white and black text, and links are adjusted to stay readable.

/* Using the defaults */

Dark mode

TagBrush.css follows the visitor's system preference. Use the switcher at the top of the page, or set data-theme on any element to force a scheme for just that part of the page:

What you get

Everything below is plain HTML with no classes, styled entirely by TagBrush.css.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text is set in your system font with a comfortable line height. It supports links, bold, italics and inline code.

Inline elements are covered too: highlighted text, keyboard shortcuts like Ctrl + K, CSS abbreviations, H₂O, E = mc², sample output like Build succeeded, and small print.

Edits show up as removed and inserted text, outdated text is muted, a definition stands out, and inline quotes get curly quote marks.

42

is an <output>.

Blockquotes are great for callouts, notes, and quotes worth highlighting.

// Code blocks scroll horizontally when they overflow, and highlighted
// code from Prism, highlight.js, Hugo, Jekyll, or Shiki gets theme colors
function greet(name) {
  console.log(`Hello, ${name}!`);
  return 42;
}

Lists

Navigation and menus

Lists inside <nav> become a horizontal row. Mark the current page with aria-current="page":

Label a <nav> "Breadcrumb" and its list gets separators:

Use <menu> for a toolbar of actions:

Articles and asides

Media

Buttons

Set aria-busy="true" while something loads. It shows a spinner and tells screen readers to wait:

Wrap buttons in <div role="group"> to lay them out in a row. It works for inline forms too:

Forms

Progress and meter

Meters turn green, amber, or red based on their low, high and optimum attributes:

Disclosure and dialogs

Neighboring <details> join into an accordion. Give them the same name so only one opens at a time:

Article grids

A <section> of two or more <article>s becomes a grid of cards, with no classes. Headings and paragraphs in the section span the full width:

App patterns

Dashboards and admin pages need no classes either. A <dl> of <div>s becomes stat tiles, a <header> with a heading and a button puts them on one row, and <search> lays out filters. An <aside> next to <main> becomes a sidebar layout.

Layout helpers

A few optional classes cover the layouts almost every site needs: .grid for responsive columns, .card for boxed content, and role="group" for rows of buttons.

Tables

Get started

1. Add the stylesheet

Use the CDN, or download tagbrush.css and host it yourself.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagbrush@1/tagbrush.min.css">

2. Write semantic HTML

<header><nav><strong>My site</strong> <a href="/about">About</a></nav></header>
<main>
  <h1>Hello, world</h1>
  <p>It already looks good.</p>
  <button>Click me</button>
</main>
<footer>© 2026 Me</footer>

No classes needed: the content is centered and the footer stays at the bottom of short pages. Or start from starter.html, a complete page to copy.

3. Make it yours (optional)

<style>
  :root {
    --color-primary: #10b981;
    --font-family-base: "Inter", sans-serif;
    --border-radius: 0.5rem;
  }
</style>

Because TagBrush.css lives in its own cascade layer, any rule you write wins, even a plain button { … } selector. No !important needed.