The Skin is on!

Default classes:

Headlines:
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

Blockquote:
<blockquote>…</blockquote>

If you want to add an actual quote and credit the source, you can do so by adding a <i>-class at the end of the <blockquote>:

<blockquote>…<i>…</i></blockquote>

Paragraph:
<p>…</p>

Divider:
<hr>

Unordered List:
<ul><li>…</li><li>…</li><li>…</li></ul>

--

Custom Classes:

Button:
<div class="button"><a href="[URL]">[LINK TITLE]</a></div>

Thumb feature:
<div class="feat">:thumb…: :thumb…: :thumb…:</div>

Also works with :bigthumb…: and <da:deviation id="[deviation number]">

<da:deviation id="[DEVIATION NUMBER]"> is the code for deviations that have been dropped via the Add Media option in sta.sh writer. [deviation number] is the number also used for thumbs of deviations. You can see the code when you drop a deviation while in Rich Editing Mode and then switch to HTML Editing Mode.

All deviations are styled, whether they are contained in the <div class="feat">…</div> or not. This class merely centers them; you could achieve the same by using <div align="center">…</div> in HTML Editing Mode or selecting the thumbs and using the Rich Editing Mode buttons to center the text in sta.sh writer. 

Full width image with hover text
<div class="full-width-image"><a href="[URL]"><img src="[IMAGE URL]"></a><i>[HOVER TEXT]</i></div>

This is a more advanced option to display images. You will have an image link in a custom div-class with the option to add a hover text element. 

Whatever you want to be written on hover will be added into the <i>…</i> element; this can be anything you want, the deviation title and username or anything else. 
The image does not even need to be a deviation and it does not have to be linked either; so for example you could put in an image for a tutorial and upon hovering the element further information will be displayed over the image. 
If you don't want any text on hover, just leave out <i>…</i>.

Half width images with hover text
<div class="half-width-image"><div class="hwi"><a href="[URL]"><img src="[IMAGE URL]"></a><i>[HOVER TEXT]</i></div><div class="hwi"><a href="[URL]"><img src="[IMAGE URL]"></a><i>[HOVER TEXT]</i></div></div>

This is a bit more advanced than the one before. In this div-class you will be able to see a square parts of the embedded images, not the full image. And the image links will be displayed without any margins between them.
I highlighted the code for one element. It works the same way as the full width images with hover text. The only difference is, that it is contained in another div-class. 
You can add as many hwi-classes in a half-width-image-class as you like, common sense suggests an even number 

2-column element
<div class="columns"><span>[TEXT]</span><span[TEXT]</span></div>

The 2 columns will both be of the same height, the one of the longer element.