Actions

Birdhouse

Text formatting: Difference between revisions

From The Birdhouse

mNo edit summary
mNo edit summary
Line 21: Line 21:
<span class="minecraft">minecraft</span>
<span class="minecraft">minecraft</span>


<span class="center">center</span>
<div class="center">center (must be inside a div, not a span)</div>


<span class="bold">bold</span> <span class="italic">italic</span> <span class="underline">underline</span> <span class="white darkbg">darkbg</span>
<span class="bold">bold</span> <span class="italic">italic</span> <span class="underline">underline</span> <span class="white darkbg">darkbg</span>

Revision as of 02:28, 25 August 2024

With some basic HTML, you can use custom Minecraft colors on pages!

HTML tags

To start, you surround the text you want with span tags. Like this: <span>YOUR TEXT HERE</span>

In HTML, <tags> are given in brackets, and their equivalent ending </tags> are placed at the end, with a slash to denote that it's the end. The span tags above are saying, "I want certain things to happen in the span between the tags."

But nothing will happen if you don't specify what you want! You need to give the tag some classes: <span class="CLASSES GO HERE">TEXT</span>

Classes tell the website to render text a certain way. When you write a class in between the quotation marks, it finds the class in the CSS and applies it to whatever's in between the tags.

We can use this to give text some color or write things in the Minecraft font!

You can use multiple classes by putting a space in between them. For example, if I wanted purple text in the Minecraft font, I'd write <span class="minecraft lightpurple"></span>

List of classes

Here's a list of all the custom classes currently on the wiki. For the "darkbg" class, make sure to also add "white" or another light color so it's readable!

minecraft

center (must be inside a div, not a span)

bold italic underline darkbg

darkblue darkgreen darkaqua darkred darkpurple gold gray darkgray

blue green aqua red lightpurple yellow white

Special formatting

Typewriter effect

Make text appear letter by letter. Example: Amy Stall.

Add an ID called "typewriter" to a div or span and all the text inside will render this way. Note that you can only have one typewritten piece of text on a page, due to the way the script is coded.

<span id="typewriter">Your text here.</span>

You can apply classes to the same tag as the typewriter ID, but you can't do it to specific parts of typewritten text. For example, this won't work:

<span id="typewriter">Your <span class="blue">text</span> here.</span>

But this will:

<span class="blue" id="typewriter">Your text here.</span>