caption: Styles and Classes
created: 20131205160532119
modified: 20230726105744098
tags: WikiText [[How to apply custom styles]]
title: Styles and Classes in WikiText
type: text/vnd.tiddlywiki

CSS styles and classes can be applied to inline or block content wrapped in `@@double at signs@@`. Classes can be applied to certain block WikiText elements.

//Inline content// wrapped in `@@double at signs@@` without specifying style or class will be assigned the `tc-inline-style` class and displayed as highlighted text. The foreground and background colours of the highlighted text are defined as `highlight-background` and `highlight-foreground` in the current palette.

<<wikitext-example src:"@@Highlighted text@@">>

!! Styles

Multiple style attributes, e.g. `color`, each followed by `;` semicolon can be introduced immediately after the opening `@@`, without spaces in between.

<<wikitext-example src:"@@color:steelblue;background-color:lightcyan;Text with custom style@@">>

Similarly, styles can be applied to //block content//. Wrapping block content in `@@` without specifying style or class has no effect.

<<wikitext-example src:"@@background-color:lightcyan;
* Item one
* Item two
@@
">>

!! Classes

The following `coloured-text` and `coloured-bg` classes are defined in this tiddler for demonstration purposes:


```
.coloured-text {color: darkkhaki;}
.coloured-bg {background-color: cornsilk;}
```

<style>
.coloured-text {color: darkkhaki;}
.coloured-bg {background-color: cornsilk;}
</style>

Multiple classes, each prefixed with `.`, can be introduced immediately after the opening `@@`, followed by a ` ` space. This works both for inline and block content:

<<wikitext-example src:"@@.coloured-text.coloured-bg Inline content with two assigned classes@@">>

<<wikitext-example src:"@@.coloured-bg
* Block content
* With one assigned class
@@">>

Multiple classes and styles can be applied simultaneously. In case of inline content, the styles have to be defined first, followed by the classes.

<<wikitext-example src:"@@font-size:1.5em;.coloured-text.coloured-bg Text with custom style and classes@@">>

In case of block content, the styles and classes can be defined in a single line after the opening `@@` identically as for the inline content, or in separate lines, each beginning with `@@`:

<<wikitext-example src:"@@font-size:1.5em;
@@.coloured-text
@@.coloured-bg
* Block content
* With custom style and classes
@@">>

In a similar way classes, but not styles, can be applied to those block WikiText elements that are introduced through characters on the beginning of the line. The classes prefixed with `.` are specified immediately after the special characters, followed by a ` ` space.

<<wikitext-example src:"!!!.coloured-bg Heading with a custom background class.

* Standard list element.
*.coloured-bg List element with a custom background colour class.
*.coloured-text List element with  a custom text colour class.
*.coloured-bg.coloured-text List element with both of the custom classes.
">>