Styling Like a Minnow

To begin a journey into the New World, one simply makes articles with images that go with the post. Words are simply added above or below images like this. Without style, simple effective at first, and easy to create. As one begins the decent into the world of SteemIt one will see these types of layouts are not all that can be made. Some people are very talented and know layouts and design. Others simply start to use some of these tips and tricks.

---

Starting to put the tools together!

We start with a broken set of tools, uncompleted, being we see others are doing tricks with the text, moving images left, or right, and having the text flowing on the side of the image! As with this, the image is on the right, as the text is flowing next to it on the right. We see these things being done, and just assume they know some magic! It is much easier than you would think, being that one of the tools we can use here on SteemIt is the Markdown Editor, it is just simply using HTML divisions inside the markdown text.

---

Making text flow around images!

In order to have the image be on the left, or the right of the screen you simply use
<div class="pull-right">
image address goes here
</div>

You can even use the word left, center or right depending on where you would like the image to be on the page.

Example in use ...

---

Centering our text!

As you can see the image will go to either the left or right, and yes I did use 2 separate images for this example! In case you noticed I also centered the text I added under the images. You can center headers text and other items inside your post. To do this you would add <center>Your text would go here!</center>. This will center the text on the page, or on the side of the image.

Example:

Your text goes here!

---

Using headers

As for the headers of the sections on your page, it is always nice to have them. I also recommend having the ones in the body smaller than the one at the top. The differences are small, but they do make it obvious when reading the page. There are 6 levels of headers ranging from large to small.

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

They will look like this as they get smaller:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Along with headers if you wish to make inline changes like Bold or Italics your text you would use the **Bold** or *Italics* and if you would like both you just use 3 asterisks ***like this***.

---

Adding lines to break up text!

As you have seen so far, I have tried to make a point of breaking up each of these sections to make is easier to follow! To do this @pap-pepper uses his cool little line of pepper, or I have been using the horizontal line. I tend to use the HTML code here all you add is the <hr> to the text to have the horizontal line added to break things up!

Example:

---

Task list

I have spent some of my time learning a few tricks, there are several others that can be done as well like creating check lists.

• [x] this is a complete item
• [ ] this is an incomplete item

To add a line you can use the either an * or a - (dash) then add the brackets and what you want on the list. Simply add an "X" to mark the task completed. Like this - [x] completed item or like this - [ ] not completeI know this may seem basic to me now, but three months ago I had no idea any of this could have been accomplished!

---

Tables

And then there are even tables. To do these you need the | to make the columns. To get started making a column you simply decide the number you would like in this case 2 and type it in like this:

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2

Example of 2 column table:

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

---

Conclusion

If your not use to using the markdown language like I was not, just about three months ago, then all it takes is to simply work at adding one or two of the to your posts. As you get to be more familiar with them you will see your post layout goes from being not great, like my example at the top of this post! To the end where it is styled. If your like me, I am not good at making layouts, so what I did was experiment. But most of all, I remember looking at news papers, they paid people to make the layouts look impressive.

---

I know I may be missing several different formatting tips, these are some of the basics I have learned, and obviously I have also started using them in my posts. So being just a minnow swimming against the stream here I hope that I have been able to help you learn a few of the fun styling tips, let me know what you think of these. If you have a simple tip or cool style you have used on your own that would help please let others know in the comments. There is no limit to how creative we can make our blogs.

Most important just have fun with your post, if you feel these tip will help you then go ahead and use them. Thank you for reading and I hope you enjoyed my formatting tips and tricks! If you like this post you can always upvote, follow and resteem!

---

Image Source 1, 2, 3, 4, 5, 6

Sources 1, 2

---

Thanks to @son-of-satire for this gif.

Thanks to SteemVerify.com and @elyaque