"CSS Selectors": SugarCube (v2.18)#
Summary#
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.
<body>
<div id="ui-bar">...</div>
<div id="story">
<div id="passages">
<div id="a-passage-name" class="passage">...</div>
</div>
</div>
</body>
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]]
:: Second
This passage also has a red border.
See Also#
See the SugarCube images 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.