How to style individual passages with CSS in Twine? (Sugarcube)

I'm currently doing a project in Twine and am using the Sugarcube format. I can't figure out how to style individual passages using CSS. I've tried creating classes in CSS and then tagging a passage with that class's name, but it won't work.

Solution

The SugarCube documentation lists a number of ways to style a passage based on passage tags. So, if you tagged a passage with "forest" these examples are given:

→ Using class selectors on <body>
body.forest { background-image: url(forest-bg.jpg); }
body.forest .passage { color: darkgreen; }
body.forest a { color: green; }
body.forest a:hover { color: lime; }

→ Using [data-tag~="…"] attribute selectors on <body>
body[data-tag~="forest"] { background-image: url(forest-bg.jpg); }
body[data-tag~="forest"] .passage { color: darkgreen; }
body[data-tag~="forest"] a { color: green; }
body[data-tag~="forest"] a:hover { color: lime; }

→ Using [data-tag~="…"] attribute selectors on <html>
html[data-tag~="forest"] { background-image: url(forest-bg.jpg); }
html[data-tag~="forest"] .passage { color: darkgreen; }
html[data-tag~="forest"] a { color: green; }
html[data-tag~="forest"] a:hover { color: lime; }

Make sure you put the CSS you use in your story's Stylesheet section.