FANDOM


The big difference between this and the other way of formatting text is that with that one, each paragraph must be surrounded by it's own piece of code. Here, anything within the </div> is formatted, and it can be as much as you want. If you're going to format more than one paragraph, this way is neater and more elegant.

FontEdit

This code gives text a font. Only people with that font on their computer will be able to see it.
Basic code:
<div style="font-family:{{{Font}}};">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="font-family:Times New Roman;">
Times New Roman text
</div>

Times New Roman text



ColorEdit

This code gives text a color.
Basic code:
<div style="color:{{{Color}}};">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="color:Purple;">
Purple text
</div>

Purple text



SizeEdit

This code adjusts the text size. It's written as percents, with 100% being the default text size.
Basic code:
<div style="font-size:{{{Size as NUMBER%}}};">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="font-size:130%;">
130% text
</div>

130% text



Letter spacingEdit

This code adjusts the space between letters.
Basic code:
<div style="letter-spacing:{{{NUMBERpx}}};">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="letter-spacing:10px;">
10px spaced writing
</div>

10px spaced writing



Text shadowEdit

This code gives text a shadow.
  1. The first number refers to how far right of original letter the shadow is.
  2. The second number refers to how much below original letter the shadow is.
  3. The third number refers to how the edges of the shadow blurs.
Basic code:
<div style="text-shadow:{{{NUMBERpx}}} {{{NUMBERpx}}} {{{NUMBERpx}}} {{{Color}}};">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="text-shadow:10px 5px 2px Purple;">
Shadowed text
</div>

Shadowed text



Multiple columnsEdit

https://www.w3schools.com/css/css3_multiple_columns.asp

This code makes the text have multiple columns.
Basic code:
<div style="column-count:{{{NUMBER}}};">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="column-count:2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Columns by widthEdit

This code makes columns of a certain width.
Basic code:
<div style="column-width:{{{Number}}}px;">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="column-width:80px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Gap between columnsEdit

This code adjusts the gape between the columns.
Basic code:
<div style="column-gap:{{{NUMBER}}}px;">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="column-count:2;
column-gap:50px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Line between columnsEdit

This code adjusts a line between the columns.
Basic code:
<div style="column-rule:{{{Number}}}px {{{Border style}}} {{{Color}}};">{{{Text}}}</div>
Example Code: Example Code Result:
<div style="column-count:2;
column-rule:2px Dotted Purple;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.