This simple little tutorial will give you a quick and easy way to format text using CSS. As you know, some stuff cannot be done using regular wiki-formatting, so we need to dig into the system and create these ourselves. This includes colored text and resizing text. A bit of knowledge on CSS is recommended, but not a necessity.

Don't worry, as this is not at all as difficult as it may sound :)

Quick introduction

During these small tutorials you will encounter certain HTML tags. Namely the so-called <span> tag which will allow us to customize small areas of a page. To utilise this, we must use inline CSS. A simple syntax for this would be:

<span style="property:value">Formatted example text</span>

The <span> tag being the selector, the property being the attribute we would like to change, and the value being the thing we want to edit on said property. The </span> is an end tag for the text area we want to edit.

Colored text

Okay, let's start out easy by learning how to do colored text on wiki pages. For example, if we want to have red text like this, we simple use this following snippet:

<span style="color:red;">This text will show as red.</span>

This gives us a lot of possibilities. We can even make rainbow colored text. You can see some easy examples in this following table:

Code: Result:
<span style="color:red;">Red text</span> Red text
<span style="color:green;">Green text</span> Green text
<span style="color:blue;">Blue text</span> Blue text

Custom text color

If you encounter a spot where you want to use a certain color but it doesn't have a name we can still use this if you have the colors HEX-value. For an example, the background of the wiki has a background HEX-value called #DDDDDD. These number/letters represents a specific color. Use this page to find the colors and codes you need.

When you have your color code, you simply insert that value instead of the specific color name from before. Like this:

Code: Result:
<span style="color:#00EBA8;">Colored text</span> Colored text
<span style="color:#EBC400;">Colored text</span> Colored text
<span style="color:#303030;">Colored text</span> Colored text

Resizing text

In some cases you want to resize text to emphasize it. This can also be done using CSS. First off, there are a lot of different units on the internet for size and the like. On this, I will use pixels (px) only to make things easier.

As before, we use the <span> tag with inline CSS to add these attributes to certain text areas. Like this:

Code: Result:
<span style="font-size:10px;">10px text size</span> 10px text size
<span style="font-size:12px;">12px text size</span> 12px text size
<span style="font-size:14px;">14px text size</span> 14px text size
<span style="font-size:16px;">16px text size</span> 16px text size
<span style="font-size:18px;">18px text size</span> 18px text size
<span style="font-size:20px;">20px text size</span> 20px text size

However big you want the text to be, is entirely up to you. As long as you don't use an excessive amount of this and as long as the text is fully readable on 100% browser zoom.

Combining resized and colored text

In some rare cases, you may want to use both colored text and resize it. This is also very easy to perform as we simply combine the two CSS properties, seperated by a semi-colon. Like this:

Code: Result:
<span style="font-size:10px;color:green">Custom text</span> Custom text
<span style="font-size:14px;color:#00EBA8;">Custom text</span> Custom text
<span style="font-size:20px;color:red">Custom text</span> Custom text

Read more

You can find tons of information about inline CSS styling on the internet. Here are some great guides and/or explanations to a lot of it:

As usual, if you have ANY questions, do not hesitate to ask in the comment section. No question is too small or too stupid to ask. I hope this guide will help you along with editing! :)


Community content is available under CC-BY-SA unless otherwise noted.