Code more complicated formatting

Step 1: Edit the Stylesheet

In this example, I am going to set up the formatting for a heading.

I want my heading to be larger than the rest of the writing, and be a different colour.

To change the formatting, you need to Edit Story Stylesheet, which can be found in the menu next to the story title on the bottom left.

Underneath any code you have already created, begin a new section like this:

h1 {

}

This means Heading 1. You could also use h2, h3 etc.

Inside the curly brackets, add your code to change the colour (same as before), and the font size (new code!).

h1 {
  color: #249140;
  font-size: 40px;
}

This will change the colour to dark green, and make it 40 pixels in size.

You can put anything you like in here but, to test it out, choose some code that you have used before!

Step 2: Use your new heading

You have created a h1 style, now you can choose what parts of your story you want to apply this style to.

Close your Stylesheet, and open a passage in your story. Add a new line of text to the top, for example 'this is a test heading'.

At the start of your new line, add <h1>, and at the end add </h1>. Notice the backslash at the end!

<h1>this is a test heading</h1>

Play your story and check your passage - did your new heading use the new formatting?

Create different headings in your Stylesheet and use them in different parts of your story.

• different characters could use different colours when they speak
• you could make some paragraphs bigger for dramatic effect