# Style your page with CSS

*nods · The platform*

A stylesheet of your own is applied after the page’s. These are the names it can hold on to and the rules it has to pass.

## Write your rules over the page’s own.

In the app, open Page and then CSS. Your stylesheet sits in a later cascade layer than the page’s, so a rule of yours wins without a heavier selector. It may be 20 kB at most. [Pricing](https://nods.to/pricing) lists the plans that include it.

Your stylesheet

```
body { --a: #1a4bff; --r: 0; }
.me h1 { letter-spacing: -0.03em; }
[data-widget="quote"] { border-top: 1px solid var(--l); padding-top: 2rem; }
@media (min-width: 60rem) {
  body[data-layout="wide"] section h2 { font-size: 2.5rem; }
}
```

## Hold on to these selectors.

They keep their names from one release to the next. Any other class on the page may change.

| Selector | What it is |
|---|---|
| `body[data-layout="column"]` | The page, in one column. "wide" is the other layout. |
| `body[data-align="left"]` | The page, set to the left. "centre" is the other. |
| `main` | Everything above the foot. |
| `.me` | The head: picture, name, line and place. |
| `.me h1` | The name. |
| `.tag` | The line under the name. |
| `.place` | The place. |
| `[data-widget="about"]` | A widget, by its kind. |
| `[data-widget="arrival"]` | The strip a visitor sees when they came from one of your sites. |
| `section h2` | The title of a widget. |
| `.button` | The contact button. |
| `footer` | The foot of the page. |

## Select a widget by its kind.

Every widget is a section that says its kind in `data-widget`. There are twelve kinds.

Kinds

```
[data-widget="about"]
[data-widget="text"]
[data-widget="links"]
[data-widget="socials"]
[data-widget="sites"]
[data-widget="studies"]
[data-widget="gallery"]
[data-widget="video"]
[data-widget="contact"]
[data-widget="collaborators"]
[data-widget="numbers"]
[data-widget="quote"]
```

## Set the properties the page is drawn from.

| Property | What it sets |
|---|---|
| `--g` | Ground: the background. |
| `--i` | Ink: the text. |
| `--a` | Accent: the button and the live dot. |
| `--oa` | The text on the accent. |
| `--d` | Dimmed text. Set on body, mixed from ink and ground. |
| `--l` | Lines and borders. Set on body. |
| `--s` | A faint surface. Set on body. |
| `--r` | The corner of cards, pictures and buttons. |
| `--ra` | The corner of the picture at the head. |
| `--head` | The typeface of headings. |
| `--body` | The typeface of everything else. |
| `--hw` | The weight of headings. |
| `--ht` | The letter-spacing of headings. |
| `--w` | The width of the page. |

## Keep every file on the page’s own address.

The stylesheet is printed on a public page, and a request to another server would give that server your visitor’s address. A stylesheet that asks for one is refused whole, and the form says why. Each line below is refused.

A file from another address `body { background: url(https://example.com/a.png); }`

A set of images `body { background: image-set("a.png" 1x); }`

An image by function `body { background: image("a.png"); }`

An imported stylesheet `@import "other.css";`

A typeface file `@font-face { font-family: Mine; }`

A backslash escape `.me::after { content: "\201C"; }`

The character < `.me::after { content: "<b>"; }`

An expression `.me { width: expression(1); }`

A binding `.me { -moz-binding: none; }`

A behaviour `.me { behavior: none; }`

A bracket with no partner `.me { margin: 0;`

A comment left open `/* a note .me { margin: 0; }`

A quoted string left open `.me::after { content: "a; }`

Of the at-rules, `@media, @supports, @container, @layer, @keyframes` are accepted and every other is refused. Comments are taken out before the stylesheet is checked.

## Leave the nods mark where it is.

Where a page carries “Made with nods” at its foot, the mark is held in a layer of its own, and a rule that hides, shrinks or recolours it has no effect.

Next, [connect an assistant](https://docs.nods.to/mcp/).

---
https://docs.nods.to/page-css/ · nods 0.1.0 · MIT