One thing that I see a lot of these days on Steemit is unformatted posts. Here I’m going to give a guide on how to style your post to make it easy to look at and interesting.

Steem uses a blend of Markdown and HTML. Markdown is a new markup language that is simple and easy to learn. One of its most notable users is GitHub, which uses it to format README files and wikis. HTML is the standard markup language for the web, the backbone of every website. Even markdown is converted into HTML to be used.

Markdown 101: Basics

---

Let’s start with the basics, bold and italics.

*One way to do italics*
_Another way to do italics_
**One way to do bold**
**Another way to do bold**

---

One way to do italics
Another way to do italics
One way to do bold
Another way to do bold

Bold doesn’t show up very well on the Steemit website, so consider that when designing. I usually use italics when I want to emphasize the key persuasion or principle of the article. For example:

Ethereum needs to address scalability issues or it will be forgotten.

Headings are also another key thing in any post:

# H1
## H2
### H3
#### H4
##### H5
###### H6

H1

H2

H3

H4

H5

H6

Pretty simple, right? Well, the next one isn’t as simple...

Let’s try to do indents for paragraphs:

      Indenting paragraphs!

results in:

  Indenting paragraphs!

Wait what? We’ll get to that feature later. But why is it doing that?

Because Markdown seems to ignore spaces, and uses them for other things too... So I have a workaround:

      Indenting paragraphs?

      Indenting paragraphs?

Somehow, it works! Why? Because  is an HTML character for a non-breaking space. HTML automatically deletes multiple spaces in a row, which stops you from doing indents with just spaces. You can read more about it here.

And by the way, how did I put that link in the text? Here’s an example:

https://www.w3schools.com/html/html_entities.asp
[This is linked text!](steemit.com)
You can read more about cats [here](https://en.m.wikipedia.org/wiki/Cat)

https://www.w3schools.com/html/html_entities.asp

This is linked text!

You can read more about cats here.

So, to link text, just either put the link in, or use [text](site address). Ok, now on to images. For images, you can either drag and drop, paste, select them from your file system, or use the format ![](image link here).

To make lists, you can do:

You can make bullet points with:
* An asterik
+ A plus sign
- A minus sign

And ordered lists are:
1. Simple
2. Ordered
3. Easy-to-use

You can make bullet points with:

• An asterik

• A plus sign

• A minus sign

And ordered lists are:

1. Simple
2. Ordered
3. Easy-to-use

To make inline code, you can use:

The `hello-world()` function prints out one line, then returns.

The hello-world() function prints out one line, then returns.

For code blocks, you can either indent by 4 spaces or use apostrophes:

```
This is a code block.
```
    This is also a code block.

This results in:

This is a code block.

And:

This is also a code block.

Tables are made to be very similar to what they will look like.

Coin | Price | 24 hr volume
--- | --- | ---
Bitcoin | 8,627 | 7,356,000,000
Ripple | 0.70 | 698,000,000
Steem | 2.85 | 9,000,000

Coin	Price	24 hr volume
Bitcoin	8,627	7,356,000,000
Ripple	0.70	698,000,000
Steem	2.85	9,000,000

And, you can also do horizontal rules:

Using dashes:

---
Using underscores:

___
Using equals signs:

===

Using dashes:

---

Using underscores:

---

And lastly, quotes:

> This is a quote. Use it if you are quoting someone or a piece of text.

This is a quote. Use it if you are quoting someone or a piece of text.

My top five tips on how to make your Steem posts look beautiful:

1. Use the <center> tag.

This tag allows you to center anything. This text was written:

<center> This tag allows you to center anything. This text was written: </center>

This is especially useful for images. For example, this is very ugly, and is the usual option:

But you can center it with <center> </center> to get:

2. Create white space

Sometimes you want to create a lot of space in between bits of text, like this:

But if you just press enter a bunch of times, Markdown deletes most of them when rendering the text. So just type <p><br></p>a few times and get some white space!

3. Cover photo/thumbnail

The first image in your post will become the cover photo/thumbnail for your post. These images show up best if you keep their width at about 1.5x or 2x their height.

4. Columns/advanced formatting

Just look at this beautiful post by @dlive. To do something like this, where you move the image to the right, you can use:

<div class="pull-right">https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Black_white_cat_on_fence.jpg/220px-Black_white_cat_on_fence.jpg</div>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum neque est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra, velit eu dapibus finibus, felis arcu dapibus ipsum, eget volutpat augue dui nec purus. Vestibulum facilisis laoreet augue, vitae molestie leo condimentum ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum neque est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra, velit eu dapibus finibus, felis arcu dapibus ipsum, eget volutpat augue dui nec purus. Vestibulum facilisis laoreet augue, vitae molestie leo condimentum ac.

All you need is <div class="pull-right"> Your image here </div>to bring an image to the right. You can then type text directly below that line and have it automatically go to the left of the image.

5. End call to action

Most posts have a ‘call to action’ at the end, telling users to “upvote, follow, resteem” or something like that. Use this link: https://steemitimages.com/DQmRhDtjokAZnGKi4QwheqksKTFo6m4fsjMYsNNrsitC1xk/upvote.gif to have a nice ending gif: