How to link style sheet into every passage

Hi, I’m looking for help on how to link a CSS style sheet in Harlowe/Sugarcube into every passage of my project with a certain command. I have been copying and pasting the same code into all the passages because it is the the back-bone of what’s needed in the project and it slowly became daunting to just copy and paste it every new passage I make.

Is there a way I can simply link it to every passage all I once with a command?

In either Harlowe or Sugarcube, CSS goes in the Story Stylesheet. The CSS will be applied to the entire game (unless you code it do otherwise), so you don’t need to copy and paste it multiple times.

Below is where to find the Story Stylesheet:

Ok but what if I wanted to just use the certain part of written code in a stylesheet and copy and paste it into every passage?

That…sounds to me like a misunderstanding of how CSS works: generally you put all the styles in the story stylesheet and then control (in various ways) which passages and elements they apply to. I could be wrong, but I just can’t think of a situation where you would actually need to paste CSS into every passage.

Can you say more about what you’re trying to do here? What do you want the styles in your story to do?

Yeah, I think it’s what I want to know to. I want to style with a code in CSS how a certain passage is supposed to look like. Like if I want the same background in 10 different passages, I would just like to code that in CSS, not in every passage ten times…

In CSS you are supposed to be able to create different classes. Maybe I could create a certain class for a certain passage/passages and be able to change them there?? But how to make a passage a certain class??

Maybe check out Grim’s Twine Grimoire Vol. 1? I think it’s a pretty solid introduction to CSS in Twine, doesn’t assume you already know what you’re doing like a lot of CSS stuff on the web…

1 Like

I never assume anything! :slight_smile: Thanks!

Ahhaaa! Thanks! Tags is the way to go to style a certain passage! nice!

You have to use tags! I just did it strictly for different backgrounds for different passages.
You add a specific “tagname” to a specific passage. Then you go to your stylesheet and use this code:

tw-story[tags~=“tagname”] {/* Your CSS Here */}

Then you just do it again for a different passage with a different tag…

tw-story[tags~=“othertagname”] {/* Your CSS Here */}

BUT! This code is for the latest Harlowe 2.x & 3.x, its a different code for the other Subercube…

I hope this helps!

In SugarCube how to do that is explained in the CSS section of the documentation, with some good examples within the “Tagged Stylesheets” part at the end. The documentation there also explains how to have the CSS in your Stylesheet section target all of the passages.

Enjoy! :grinning: