The Simple Universal Stylesheet: Difference between revisions

From All The Fallen Stories
Jump to navigation Jump to search
Hgcollins (talk | contribs)
No edit summary
Hgcollins (talk | contribs)
No edit summary
Line 12: Line 12:
'''1. Copy this code and include it at the top of every page you want to add style.'''
'''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.  
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.'''''
<pre>
<pre>
{{#css:simple-stylesheet.css}}
{{#css:simple-stylesheet.css}}

Revision as of 09:22, 25 February 2022


The Simple Universal Stylesheet

Want your story to look fancy but don't know how to code?

Then you've come to the right place!

The was made for anyone who doesn't know how/doesn't want to bother with CSS, but would still like to add styling elements to their stories. 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!

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 on 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>


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