CSS and Sugarcube

how to style various things in CSS:

#style {
}

#style {
}

in CSS would appear anywhere in the story id=“style” has been used. e.g. “content”

body {} or a {} or img {}

with no associated symbols will define those html tags (respectively, the body of the site, links, and images). Universally.

.green {} or .macro {}

The “.xxx” in CSS will define anything in the html with the class=“xxx”. For example:

.green a {color: green;} in CSS and <span class=“green”>[[next passage]]</span>

will  render the hyperlink text green instead of the universal color used throughout the story.

SPECIAL TO TWINE! The .xxx in CSS also applies to passages specifically tagged with xxx. So: body.trouble {}

in CSS will define the body (background, font, etc.) for any passage tagged “trouble”.

It can also be used for styling certain macros used, such as the “cyclinglink":

.cyclinglink {color: purple;}
.cyclinglink:hover {color: white;}

.cyclinglink {color: purple;}
.cyclinglink:hover {color: white;}

in the CSS will set all cycling links to purple, with white on the mouseover (can style just like elements). (See also Cycling links (Sugarcube 2)).

SPECIAL TO TWINE! #story {}

in CSS defines the style for the passage content. Anything you want applied to ALL passage content, define it here. I frequently use this to re-size the space where the text appears.