Skip to content

"CSS Selectors": Harlowe (v2.0)#


The following example is designed for use in Harlowe 2.x and later


This example shows how to use CSS selectors to style different areas of the page. In Harlowe, custom HTML elements are used for layout: the <tw-story> element contains the page as well as a an element containing the currently shown passage, <tw-passage>, and an element containing the sidebar, <tw-sidebar>.




Twee Code#

:: StoryTitle
CSS Selectors in Harlowe

:: UserStylesheet [stylesheet]
tw-story {
    border: 5px solid lightgreen;

tw-sidebar {
    border: 2px solid blue;

tw-passage {
    border: 1px solid red;

:: Start
The page has a green border; it contains this passage (red border) and the sidebar (blue border).

:: Second
This passage also has a red border.

Twee Download

See Also#

See the left sidebar for another example of styling custom elements like <tw-sidebar>. Harlowe also supports styling passages by tag using its custom 'tags' attribute.