Coding Guide

by: Golden and Lynx

# Intro

If you code make sure you always use the Source editing. If you don't know where to change it look up at the three dots and next to it. It may say Visual editing. Click on that and it will say something like Source editing and click on that and voila! You can start writing the codes!

## Links

So first off if you want to make a link type in [[User: Goldenfeather789]] to make a link to your user page. You can also do it for your stories. If you are doing a story/page just write [[name of story]]. Ending result Soul Of The Monster

Let's see the [[User: Goldenfeather789]] link! User:Goldenfeather789

It should look like that.

If you want to make a link but you want it to look different than you could do this: [[User:Goldenfeather789|Link]] which would look like this: Link

To make a link to another website, you would have to type in the full URL (eg. [[https://scratch.mit.edu]] or [[https://scratch.mit.edu|Example]]

## Color

If you want something to be colorful than you could type in this code: <span style="color:color of your choice">text</span>

Make sure you fill out the "color of your choice" the color you want! So, if you did <span style="color:blue">text</span> then it would look like this: text

You can also make a color blend. Type in this code: <span style="background-image: linear-gradient(330deg, blue, white); -webkit-background-clip: text; background-clip: text; color: transparent">text</span>

You can change the colors if you want but if I used this code the way it is then it would look like this. text

https://htmlcolorcodes.com/color-picker/ here is a link to a color picker tool.

Important: Make sure if you are using this color picker put # <-- this sign before copy and pasting the letters and numbers.

Ex: <span style="background-image: linear-gradient(330deg, #FF0000, #E2FF00); -webkit-background-clip: text; background-clip: text; color: transparent">text</span> if you don't then the color won't show up. So what that would look like is:text

Oh also if you are doing the the gradient code then it would do it the opposite color. So if I did #FF0000 first then the final result will show it last. If I did #E2FF00 last the result will show it first

## Border

You can make all kinds of borders! So when you do border the code will look like this <span style="border:NUMBERpx TYPE;">text</span>

On the NUMBER that is where you can make the thickness of it. Higher is thicker lower in thinner.

TYPE is what you want the border to be. Here are some TYPES: double, solid, dotted, dashed, and groove

Ex:text

## Raise And Lower

If you want to raise it put <sup> in front and behind it. ex: <sup>text<sup> It should look like this: text

If you want to lower it put <sub> before and after it. ex:<sub>text<sub> It should look like this text

## Shadow

If you want text to have a shadow, you could use text-shadow. So, for example, you could do, <span style="text-shadow:black 18px 8px 2px;">Shadow</span> and that would do this: Shadow. The first number represents the X, how far left or right you want it. The middle represents Y, how high or low, and the last one (Z) affects how blurry it is.

You can also have multiple shadows, up to three. Two shadows would look like this:

This text has two shadows.

The code would be <span style="text-shadow:1px 1px 0px purple, 150px 1px 0px blue;">This text has two shadows.</span>

Three shadows would be something like this:

This is three shadows.

And the code would be: <span style="text-shadow:150px 1px 0px purple, 300px 1px 0px blue, 600px 1px 6px black; ">This is three shadows.</span>

You can also add this to another feature of code.

## Font Size & Family

You can change your font size with <span style="font-size:38pt">This is big text!</span> Font family can be done with the font-family way. This is the code for the font family- <span style="font-family:FONT NAME">text</span>

This is what the size would look like- This text is 38pt.

Some fonts won't work if your device doesn’t have the font installed. But here is a list of fonts I use that work(again it might not work for you). Brush Script MT, Times New Roman, Impact, etc.

(will add more detail later)

## Text background

So um to do this->

text
type in this code-> <div style="background: radial-gradient(COLOR, COLOR)">text</div>

COLOR is where you put the color of you choice

## Float

The code for float would be- <span style="float:right;">Float right</span> the result would be- Float right

You can also center something by adding <center> in front of the text

## Background

<span style="font-family:Times New Roman;font-size:24px;"><span style="font-family:Times New Roman;font-size:24px;"><div style="background: linear-gradient(to right, skyblue, lightcyan, white); border: 3px solid #000000; padding: 10px; color: #000"> You can change the colors and border color

ex here

In that example it will show how it will look if you center it too.

## Tabber

The code for a tabber is really simple. It is simply <tabber></tabber> For the headings, you would do (your title here)= and to go to another heading you would put |-| in between, like this
<tabber>
Content1=
Content2=
</tabber>

which would look like this:

* Content1
* Content2