CSS Styler

Editable Items

Gutter

  • Gutter Background Colour
  • Gutter Text Colour

Main Area

  • Main Area Background Colour
  • Main Syntax Colour
    • Comments
    • Tags
    • Attributes
    • Strings
    • Keywords
    • Functions
    • Names and IDs

Fonts

  • Default Font
  • OpenDyslexic Font

Preset Schemes

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<html> <!-- This website is made by me! -->

 <head>

  <link rel="stylesheet" href="/css/master.css">

  <title>My Home Page</title>

  <script>

   function myFunction() {

     document.getElementByID("testArea").innerHTML = "Hello World!";

   }

  </script>

 <head>

 <body>

  <header>

   <h1 class="heading">Welcome to my website</h1>

   <p>This is a piece of introduction text for my website. My website contains lots of amazing things that are really good for people to pay attention to and read. I hope that people visit my website a lot because it is so cool</p>

  </header>

  <main>

   <h2 class="heading">Main Section</h2>

   <p>This is the main part of the website where all of the text associated with the website will be placed. People will read all of this text and then be able to find out what is going on in my life. Trust me, its all awesome.</p>

   <button onclick="myFunction()">Push Me!</button>

   <p>This is a second paragraph of text which contains <a href="mylink.html">a link</a> which goes to a second page on the website.</p>

   <p id="testArea>

  </main>

 </body>

</html>