The world of Twine is made up of links. These links act similar to website hyperlinks, taking you to different places around the web. In Twine, you can use links to send your readers to different places or give them additional information. There are a lot of things you can do with links, especially when you pair them with macros, but right now we'll go over the basics.

When you are creating your story, think about each choice you want the user to make, and create a new link for it. A link must point to a passage, which means there must be a passage that explains the consequences of the user's choice. Here is how you can add links using both Harlowe and SugarCube:

Harlowe:

Alice found a little bottle and round its neck was a label with the words 'DRINK ME' printed in large letters. 



[[Drink the bottle.]]

[[Check for more information. -> More Info]] 

SugarCube:

Alice found a little bottle and round its neck was a label with the words 'DRINK ME' printed in large letters. 



[[Drink the bottle.]]

[[Check for more information. | More Info]] 

Setting Variables

One interesting thing you can do with links in SugarCube is adding variables. For example, if Alice decides to drink from the bottle before trying to go through a door, she might be too small to reach it. We can check to see if the potion is there or not be creating a variable called $drink and setting it to true if the user chooses that option.

SugarCube:

Alice found a little bottle and round its neck was a label with the words 'DRINK ME' printed in large letters.



[[Drink the bottle.][$drink to "true]]

[[Check for more information.|More Info]] 

You can then use that variable later to perform a check. For instance, if the potion made Alice grow, she wouldn't be able to fit through the door to exit the room.

Writing the content is the most important step in Twine, but you also want to make sure that your story looks good. You can do this through styling, either inline or through a stylesheet. Inline styling is done directly in the passage, and is an easy way to style if you want to change one word or sentence at a time. For example:

Harlowe

In the below code, the text 'Style Me!' will be changed depending on the option:

(text-style: "option")[Style Me!]

Here is a list of things you can do with the option value:

(text-style: "bold")[This text will be bold.]
									
(text-style: "italic")[This text will be in italics.]
																		
(text-style: "mark")[This text will be highlighted.]
									
(text-style: "blur")[This text will be blurred.]
									
(text-style: "mirror")[This text will be flipped horizontally.]
									
(text-style: "upside-down")[This text will be upside down.]
									

You can also change the color of the text using the same structure:

(color: red)[The text is red!]

SugarCube

Styling your story in SugarCube works a little differently. Here are some examples of styling text and changing the text color:

//Italics//

''Bold''

__ Underline __ (no spaces)

== Strikethrough == (no spaces)

@@color:red;This text will be red@@
									

Using the Stylesheet

What if you want to change an entire passage or your whole story? Thankfully, you don't have to style everything line by line. Instead, you can use the built in story stylesheet to easily style larger pieces of your story. The stylesheet can be edited directly in your Twine interface, and uses CSS - Cascading Style Sheets.

For example, let's say that I want all of the text in my story to be in Times New Roman font. I would put the following CSS in my stylesheet:

body {
    font-family: "Times New Roman";
}

While the above example would change all text in your story, you can also add styles to a specific passage. For example, let's say you want the passage 'The Red Queen' to have red text.

First, you would go to your passage and add a tag. Tags allow you to quickly access a passage from your stylesheet or javascript code. If you add the tag "red" to the passage, you can then put the following code in your stylesheet:

body.red passage {
	color: red;
}