"CSS Selectors": Chapbook (v1.0)

Summary

This example shows how to use CSS selectors to style different areas of the page. In Chapbook, the id backdrop covers the whole page, the id page is like a "story" area in other story formats, and the first <div> inside the <article> is the main passage area.

<div id="backdrop">
    <div class="page">
        <header>
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </header>
        <article>
            <div></div>
        </article>
        <footer>
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </footer>
    </div>
</div>

Live Example

Download: Live Example

Twee Code

:: StoryTitle
CSS Selectors in Chapbook

:: UserStylesheet[stylesheet]
#backdrop {
    border: 5px solid green;
}

#page {
    border: 2px solid red;
}

#page article>:first-child {
    border: 1px solid blue;
}

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

[[Second]]

:: Second
This passage also has a blue border.

Download: Twee Code

results matching ""

    No results matching ""