STEEMIT GUIDE // CODES HTML HELP
Space between paragraphs
A simple hashtag with spacing above and below.
#
To organize the text with different points
A script with space after it.
Example: (space paragraph script) -List of Thing To DO in 2018
Will look like:
- List of Thing To DO in 2018
To justify text
<div class="text-justify">Paragraph here.</div>
And it will look like my texts in the beggining super cute and easy to read with no space in the endings in each line that could make the paragraph look a bit weird.
To center
<p><center>The word or paragraph that you want to center.</center></p>
To create quotes
> Just that and a space
It would look like this.
To create hyperlinks
Example: [The name of the Link] (The link)
[Jokossita’s Blog](https://steemit.com/jokossita)
To write in bold
2 underscores or asterisks are placed at the beginning and end of the phrase or word to be highlighted.
Example: **bold** __bold__
It would be: bold in both cases
To write in Italics
Same as bold but only an asterisk or underscore would be used.
Example: *italics* _italics_
It would be: italics in both cases also
To write in bold Italics
Same as bold but instead of two asterisk or underscore would be used 3.
Example: ***italic bold*** ___italic bold___
It would be: italic and bold
To write in crossed out
Same as the others but only two things of this: ~ would be used.
Example: ~~crossed out~~
It would be: crossed out
To write in a block
I could made all this grey blocks using simple ` 3 times each side
Example: ```Hey everyone```
It would look like: Hey everyone
To write in a block and make list
| Post | Day |
| --------|---------|
| Travel | Jan 3 |
| Food | Dec 29 |
Its pretty easy and it would look fantastic like this:
Post | Day |
---|---|
Travel | Jan 3 |
Food | Dec 29 |
You can make more celds and go crazy with the code just need some imagination.
The text can be structured with headers:
You put a hashtag and a space between the tittle or the subtitle
H1 in each one I just use a # hashtag
H2 or ## two in this one and this way I go
H3 using more hashtags ###
H4 making subtitles ####
you can also use 6 hashtags to make it even smaller
Images
To place the image on the right
<div class="text-justify"><div class="pull-right">the image</div>
To place the image on the left
<div class="text-justify"><div class="pull-left">the image</div>
To make your text even prettier
To pull your text to the rigth:
Example: <div class="text-right">Your text here.</div>
If you want the text to the left just change the word "right" to "left"
To made two columns of text:
<div class="pull-left">Text of first column</div>
<div class="pull-right">Text of the second column</div>
If you have more and want to share codes let me know, this way we all can help each other to improve. I'm leaving in each postthe google docs so you can find them easily and use it anytime you want.
![](https://steemitimages.com/640x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1513105463/ytqyffydwxdb9rbodxpk.png)
If you join Steem Follower Let me know in the comments to help each other.
You can read my lastest posts:
Happy New Year !!! Real life stories.
See that I'm right :), you explained well how to do it. Good job!
You always make me smile haha thanks <3
Wow, excelente, gracias @jokossita
Siempre a la orden, pronto publicare lo mismo en español!
DO u know i recently googled html guides for my steemit post? it was frustrating because to resize my picture in here. and for a newbie who has no experience of coding? it was so bad.....
ThX for a good post, im not just upvoting this, i will bookmark too. =)
Haha I can tell I was there in the same position as you when I started but luckily I got some friends helping me out, you can also take the google doc in the end of the post. Glad that I could make something good for the community :D
Excellent recap! And there was one trick in there that I did not know! Excellent! 😊
Glad that I could help you some how :D
Hi @jokossita thanks for this informative post. You’ve given a few examples here of some classes that have been written by Steemit, such as text-left and text-justify, would you happen to know where there is a complete list of the prewritten classes that can be used for formatting with Steemit?
Thanks heaps.
I can give the one that I use, is in google docs at the end of each post that I write if you want also!
Thanks for this offer. I had a look at the one you put at the end of each post - there’s some very good information there. Easy to read and make use of in posts.
Do you happen to know if there is any way to change the default text used in the body of the post - for example, so it is Sans Serif instead of Serif.
Thanks for you help - it’s not easy being the new guy on the block!!
Is ok, we all were newbies in some point. I really don't know but If I get any knowleged I will let you know or I'll make a post :)