Skip to content

static styling with CSS

jackdarker edited this page Mar 1, 2021 · 3 revisions

The good thing with html is that you can use CSS to style everything and can even create simple effects like animated color change.

Twine comes already with a minimal predefined style but you can easily create your own. There are multiple ways that you can combine

  • Add a twee-file and call it :: Story Stylesheet [stylesheet] (the important thing is the tag stylesheet that tells the compiler its not a simple passage)
  • add a css-file in src\styles
  • add a style-section to your passage
  • modify the style/class directly in DOM

Write your css just like in a css-file, f.e. to modify the links a {
line-height: 150%;
background-color: transparent;
color:initial;
text-decoration-color: initial;
margin-left:0.25em;
margin-right:0.25em;
} a:hover {
color: #008929;
text-decoration-color: #008929;
}

Clone this wiki locally