☆ Basics ☆
This is the easiest form of HTML to learn,
if you are a newbie it is best to start here

Bold Font
<*b>Text<*/b>

Italic:
<*i>TEXT<*/i>

Underline:
<*u>TEXT<*/u>

Striking:
<*s>TEXT<*/s>

Combining Them
When combining sets of codes, it doesn't matter what order you put them in, as long as you have the beginning and the end of the code between the only words you want changed.

Example Text
<*b><*u><*i><*s>Example Text<*/s><*/i><*/u><*/b>

☆ Text Alignment ☆
This can be used to center your entire post or just certain parts
<*p style="text-align:center;"*>TEXT<*/*p>

To align entire page leave out <*/*p>

☆ Color & Highlight ☆
You will need a hexcode for this
This code will color the text only
<*font color=#HEXCODE*>TEXT<*/font>

This code highlights the text
<*span style="background-color:#HEXCODE" >TEXT<*/span>

Combining Them
Example Text
<*span style="background-color:#FFFF00" ><*font color=#FF0000*><*font size="3">Example Text Code Used<*/span><*/font>

You probably noticed that both the size and color modifiers end in <*/font>, but the same rule of openers and closers apply here. If you change both the size and color of a certain stretch of text, you must end with two <*/font>s, otherwise your size or color (whichever you placed second in the line) will continue to change the rest of your post, and ruin the rest of your HTML.

☆ Hexcodes ☆
Hexcodes change the color of backgrounds, fonts, boxes & more.
It tells the code which color you want it to be.
Blue: 0000FF - Orange: FFA500 - Purple: 800080 - Red: FF0000 - Yellow: FFFF00 - Green: 008000 - Snowblind Blue: 6c9cc1 - Aqua: 00FFFF - Dark Blue: 00008B - Lime: 00FF00 - Magenta: FF00FF - Brown: A52A2A - Maroon: 800000

More Color Hexcodes Here (Link)

☆ Lists & Bullets ☆
Bullet Points: <*ul><*li>text<*/li><*li>text<*/li><*li>text<*/li><*/ul>
For each bullet point you want, you use another set of list tags
(<*li> & <*/li>)

Numbered: <*ol><*li>text<*/li><*li>text<*/li><*li>text<*/li><*/ol>
For each number you want, use another set of list tags
(<*li> & <*/li>)

☆ Mobile View ☆
This is so mobile users can see your CSS & HTML on all devices

<*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/cjqt9wfvhsf13rp/MobileLioden.css?dl=0" /*>

☆ Images ☆
There are a few different codes for posting images:
☆ You will need to upload the image to Imgur
(or something similar) to get the PNG Link.

1st Code:
<*img src="IMAGE LINK"*>
- This one will automatically post image to full screen.
- Don't use this code for comments as it is to big.

2nd Code:
<*img src="link here" width=#*>
- This one will make the image smaller or bigger
- This will make all sides even.
- This code is best for comments
- Picture below is at width 200
Example:

3rd Code:
<*img src="URL HERE" height=# width=#*>
- This code let's you choose size of height & width separately.
- Picture below shown at height=200 width=100
Example:

☆ Tables ☆
<*div style="width:100px;height:100px;overflow:auto;border:2px solid; background:#HEXCODE;"*>TEXT<*/div>


<*table style="width:400px;border:2px solid;"*><*tr*><*th*>Header Text<*/*th><*/*tr><*tr*><*td*>Content Text<*/*td><*/*tr><*/*table>

Header Text
Content Text

You can change the size by changing the width and height px. The overflow:auto means that if you write larger than the table that the scroll bar will automatically show up. The border:1px is the standard border size. You can make the border thicker by increasing that. The background color can also be changed with the hex codes. If you want a transparent background, just take that out.

☆ Columned ☆
<*table border="NUMBER HERE" cellpadding="NUMBER HERE" cellspacing="NUMBER HERE" width="NUMBER HERE"><*tr>
<*td>Column 1<*/td>
<*td>Column 2<*/td>
<*td>Column 3<*/td>
<*/tr><*/table>

☆ Floating Boxes/Tables ☆
<*div style="position:fixed;left:0px;bottom:0px;width:165px;height:200px;border:5px solid;overflow:auto;">TEXT<*/div>

Like the others you can resize this. These can only be used in dens. You can fix it anywhere in your den.

☆ Image Overlay ☆
You will need a image resizer to use this.
Photos from imgur are to large.
Yes, you can use Click-Able Links in the code
You may need to change the size of the box to fit your image better.

CURRENTLY DOES NOT WORK ON APPLE DEVICES.
I am working on trying to change that.

The code for: Lion Facing Left (1st Image) - 50% smaller
<*table style="width: 100%; height: 400px; border: 1px solid #000; background: url(URL here) width=400 center left no-repeat; padding: 10px; padding: none; font-size: 12px; border-radius: 5px;"> Text goes here.<*/*td><*/*tr><*/*table>

The code for: Lion Facing Right (2nd Image) - 50% Smaller
<*table style="width: 100%; height: 400px; border: 1px solid #000; background: url('URL here') center right no-repeat; padding: 10px; padding: none; font-size: 12px; border-radius: 5px;">Text goes here.<*/*td><*td><*/*td><*/*tr><*/*table>

What the code does: Lion Facing Left

Text goes here.

What the code does: Lion Facing Right

My kings link Slot 1: Brimstone Undersides Slot 2: Sunset Siamese Slot 3: Stratosphere Vitiligo Slot 4: Red Lace Slot 5: Noctis Soft Rosette Slot 6: Mottled Rosette Slot 7: Neutron Flare Slot 8: Brimstone Agouti Slot 9: Lycaon Scarce Noctis Slot 10: Noctis Heavy Rosette

Credit goes to: Punny Side Up
- Original poster stated that no credit is needed
- HOWEVER, If asked where to get this code please send them here or to Punny Side Up forum.

Additional Code:
<*table style="width: 450px;height: 350px;; border: 3px double aqua; background: url('https://i.imgur.com/N1g3c7K.jpg?4') center no-repeat;padding: 5px;padding: none;font color: aqua;font-size: 15px;border-radius: 5px;"*><*tr><*td valign="center" style="background: rgba(255, 255, 255,0.6);float:left;width: 50%;height: 100%;padding: 5px;font color: aqua;text-align: right;"*>