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 47: Line 47:
</pre>
</pre>
<hr>
<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.
<pre>
  <p class="center">
  Your text here!
  </p>
</pre>
<p class="center">'''Have questions?'''</p>
<p class="center">'''Have questions?'''</p>
<p class="center">Feel free to ask them on [[User talk:Hgcollins|my talk page.]]</p>
<p class="center">Feel free to ask them on [[User talk:Hgcollins|my talk page.]]</p>

Revision as of 09:35, 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!

I made this page and stylesheet 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>

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