The Simple Universal Stylesheet

The Simple Universal Stylesheet

Want your story to look fancy but don't want to bother with code?

Then you've come to the right place!

I made this page and stylesheet for anyone who doesn't know CSS or simply doesn't want to bother spending a bunch of time on it, but would still like to add styling elements to their stories to improve readability. I designed it to be as user-friendly as possible. All it takes is a bit of copy and paste. Simply follow the directions below and make your stories fancy!

This stylesheet was designed with ease of readability in mind. Longer form stories can be hard to read on ATF, so this will change the font style so your paragraph will be bigger and easier to read.

Take a look at my story, The Sorensen Family for an example of the styling in this sheet. Everything in this sheet has been included in the first chapter.

---

1. Copy this code and include it at the top of every page you want to add style.

You'll notice right away that your paragraph font and size have both been changed to make your text more easily readable. This alone will make a huge difference and allow your story to be more easily read across all devices (including mobile). If that's all you're looking for, this is all you need. The rest of the steps are 100% optional and are only if you want to do a bit more.

{{#css:simple-stylesheet.css}}

---

2. Copy this code and Use it for story titles or chapter titles.

Simply put your own title in between the tags

<h2>Your Text Here</h2>

This header is a bit smaller than the first. It's great for sub-headers

<h3>Your Text Here</h3>

---

3. Add a grey box around text.

This is great for things you need to make stand out. I designed this to display the characters for The Sorensen Family in the Sexual Research Commission.

<div class="call-out">
   Write your content here!
</div>

---

4. Adding a line (horizontal rule)

This code adds a line across the page.

  <hr>

---

5. A Centered Paragraph

This code will center a paragraph. Pro tip: you can also use this to center your headers by copying class="center" into the header tags, too.

  <p class="center">
   Your text here!
  </p>

---

Have questions?

Feel free to ask them on my talk page.

If there is something you would like me to add to this stylesheet so you can use it in your stories, please let me know. - HG Collins

---

This is a link to the stylesheet. Do not edit. simple-stylesheet.css