T8wn

Styling your site

8TML > Guides

Colors and styles live in stylesheets: small text files with the extension .8ss, in the same key: value format as the page header. A page itself only says what things are (a heading, a link, a quote); the stylesheet says how they look.

A site-wide stylesheet

Put a file called site.8ss in the root folder of your site. Clients fetch it automatically, once per site, and apply it to every page:

# site-wide style
text: lightgrey
bg: blue
border: lightblue
h1: yellow reverse center
h2: yellow
link: white
link-sel: white reverse
quote: lightgreen

A page on that site:

# My site

Welcome! Every page here gets the same colors.

## News

> New pages every month.

Read the [news](news.8tml).

Preview: Commodore 64, 40 columns

                                            
                  My site                   
                                            
  Welcome! Every page here gets the same    
  colors.                                   
                                            
  News                                      
                                            
    New pages every month.                  
                                            
  Read the news.

One page, its own style

A page can name its own stylesheet in the header. It overrides single keys of site.8ss, not the whole sheet:

---
8tml: 1
title: Retro corner
style: retro.8ss
---

For a one-off change, put stylesheet keys directly into the page header:

---
8tml: 1
title: Warning
border: red
---

The order, from lowest to highest priority: the client’s own defaults, site.8ss, the page’s stylesheet, the page header. See Where styles come from.

Machine-specific touches

Prefix a key with a machine name to use it only there:

border: black
c64.border: lightblue

The C64 gets a light blue border, everything else a black one. See Machine prefixes.

Tips

  • Style the roles (h1, link, quote, …) instead of coloring every word in the page; the page stays readable everywhere.
  • Keep enough contrast between text and bg; on some machines colors come out differently from yours.
  • Clients without colors ignore colors but still use reverse, center and upper.

Contents