"CSS Selectors": SugarCube (v2.18)


This example shows how to use CSS selectors to style different areas of the page. SugarCube uses nested <div>s with ids to structure its significant elements. Most notably the sidebar is a <div> with id ui-bar. However, these elements are often more easily styled by other means, such as selecting the <body> element to style the entire page, and the passage class to style the current passage.

    <div id="ui-bar">...</div>
    <div id="story">
        <div id="passages">
            <div id="a-passage-name" class="passage">...</div>

Live Example

Download: Live Example

Twee Code

:: StoryTitle
CSS Selectors in SugarCube

:: UserStylesheet [stylesheet]
body {
    background-color: darkgreen;

#ui-bar {
    border: 2px solid blue;

.passage {
    border: 1px solid red;

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

:: Second
This passage also has a red border.

Download: Twee Code

See Also

See the SugarCube images recipe for an example of using a single class CSS selector to style a different element. See styling passages by tag for an example of using two classes to style a single element.


Bleached is an alternate, light-colored stylesheet for SugarCube, and a good example of how to change SugarCube's default colors using CSS.

results matching ""

    No results matching ""