Is there an easy way to create and apply text-styles across a big project?

Question

I think I've spent about an hour trying to puzzle something out, but I'm going in circles so I think I'm gonna just ask directly. I just want to be clear: I like to write, but I know NOTHING beyond very basic HTML and CSS.

If I want to, say, have each individual character's spoken dialogue styled in a different way (e.g. this one's green, this one's pink, this one's really really small), and I contain everything they say in a named hook specifically to do this;

|Guy>["Hjojojoiioijoojo."]
|Person>["HMMMMMMMMMMMMMMMMMMMM."]

Is there a simple way to style them so I don't have a huge block of enchant in every single passage where lots of people talk? Something that gets done at the start and just carries across every single passage without needing to be brought up over and over again? I've never really tried to MAKE and FINISH anything with Twine and I just want to write a nice, legible, colour-coded story please assist me.

Answer 1

You need to state the name and full version number of the story format you are using, as answers can be different for each one. I will assume that when you stated you are using Harlowe that you really meant v1.2.4 which is the default version, and not v2.0.1

 

You can use CSS based on the names you are giving your named hooks to style each of them.

First a little background, when you use a named hook like so:

|Guy>["Hjojojoiioijoojo."]

... the HTML generated for it looks like the following:

<tw-hook name="Guy" class="" style="display: inline-block;">"Hjojojoiioijoojo."</tw-hook>

... and you can use the type of the HTML element (tw-hook) and the value of it's name property (name="Guy") to create a CSS sector which will allow you to style all named hooks with the same hook name.

Place the following CSS within your story's Story Stylesheet area, it will change the foreground text colour to green.

tw-hook[name="Guy"] {
	color: green;
}

... notice the usage of the HTML element's type tw-hook and the name "Guy" of the named hook.

 

For more information on what CSS you can use to style the HTML element I suggest using one of the on-line tutorials like the CSS Tutorial at W3 Schools, or just ask more questions here.