TiddlyWiki has full support for CSS stylesheets, both inline and as tiddlers. We saw this briefly in Creating a List of Links and Backlinks. Here are a few more details.

This section assumes you have basic knowledge of CSS. If you don't, and you would like to learn more about how to style your TiddlyWiki, a variety of good tutorials are available on the web.

Inline stylesheets

You can use a <style> element to embed rules within the text of a tiddler. The style section can appear anywhere in the tiddler, but it's common practice to put it at the bottom.

Be careful, however – inline stylesheets are not restricted to that tiddler! If you place a broad rule such as p { color: purple; } in a tiddler, all paragraph text anywhere in the wiki will become purple whenever that tiddler is being transcluded in some visible part of the interface, including in other tiddlers and in the sidebar. For this reason, you should normally use a class name on all rules that you define this way, and make sure your class name has a unique prefix so it doesn't accidentally conflict with something used elsewhere in the wiki.

Because of the lack of scoping, the rules in a given tiddler are guaranteed to apply to any tiddlers that transclude it (since transcluding the tiddler causes the stylesheet in it to be read and applied to the whole page); we took advantage of this in Creating a List of Links and Backlinks.

Styling and classes in wikitext

You can apply arbitrary styles or classes to regions of wikitext using the @@ syntax, like this:

@@background-color: red;
Here is a red area.
@@

<style>
.my-funny-class {
  background-color: blue;
  color: yellow;
  font-size: 150%;
  border: 3px dotted orange;
  text-align: right;
}
</style>

@@.my-funny-class
Here is some funny-looking text.
@@

See the documentation for more on this feature.

Stylesheets in tiddlers

For styles and stylesheets you want to use in more than a single template or tiddler, a more robust approach is to place them in tiddlers of their own.

Tiddlers tagged $:/tags/Stylesheet will be incorporated in the global stylesheet and apply to all tiddlers in the wiki at all times. Any changes to such tiddlers take effect as soon as you save the tiddler.

There is a content type called text/css. This is natural for stylesheets, and if you have the syntax highlighting plugin installed, you get nice syntax highlighting when you view the tiddler, but be aware that choosing this content type takes away the ability you would otherwise have to use transclusions in your stylesheet. For instance, this is valid if and only if you have the content type of the tiddler set to wikitext:

.my-alert-class {
  background-color: <<colour alert-background>>;
}

The data-tiddler-title and data-tags attributes

You can apply rules to only specific tiddlers using the data-tiddler-title and data-tags data attributes, which TiddlyWiki automatically attaches to the containers each tiddler is rendered within in the story river. Note that this happens specifically when rendering a tiddler directly within the story river – if you transclude a tiddler which has a particular title and tags into another tiddler, no container with this attribute will be created.

You can access these attributes using the CSS attribute selector syntax. You could use this, for instance, to give certain tiddlers a different font:

[data-tags*=BadFont] {
  font-family: "Comic Sans MS", serif;
}

Here it is live in my public wiki:

Exercises

Takeaways