Sometimes you want to change the style of a short snippet of text. Here’s a quick n’dirty way to do this with links.

1- Create a stylesheet passage (that’s a regular twine passage tagged “stylesheet”). What you want to do is create CSS rules for html <span> elements which are in Twine passages, and apply them to your chosen bits of text. If you don’t know what a span element is, that’s ok, you don’t need to 🙂

Assuming you want some links to be blurred, and “un-blurred” when the mouse is over them, your declarations could look like this:


.passage span.blurredlink a {
color: transparent;
text-shadow: 0 0 5px #999;
/* This affects passage links */
}
.passage span.blurredlink a:hover {
color: #999999;
text-shadow: 0 0 0px #999;
}


Change “blurredlink” to an appropriate name, and put your CSS code inside the curly brackets.

2- In your passage, put the link you want to style inside a <span> tag, and give the span tag the CSS class name you defined in your stylesheet passage. Like this:


Hello, I'm a <span class="blurredlink">blurry link</span>.


This can also be used for regular text, not just links, just remove the “a” and “a:hover” from the CSS declaration, like this:


.passage span.neonpink {
color: #E427E8;
}


Here’s a short demo, you can also grab its twine source file (right-click, choose “save as…”). Hopefully this is useful to someone somewhere.