Make Your Steem Articles Pop with Styling | Simplified

in #steemit7 years ago

I am a relative dunce when it comes to using HTML for posts and literally as I'm typing this article, I've spotted a styling guide which probably would have been useful for not wasting the last 1-2 hours typing random keys on my keyboard in every order so I can see how it styles things.

After reading it, there is a few things that are missed, or in my mind, not explained as well as they could be, so I'm writing this for the uninitiated or technophobic. I didn't know how to do this when I woke up this morning, so you aren't the only one who has asked these questions.

I will likely edit and add to this as I discover more, but for now, this should be a good start though. Hopefully it's explained in such a way that makes things easier.

This is important so I made it big. When you use most (if not all) styling, you need to mirror it before and after it. You also need to make sure there are no spaces when using any styling tags.

Using bold text
You can do this one of three ways. Using double asterix (**) before and after the text. You can use a double underscore (__) before and after the text. You can use < b >, and then close the tag with < / b>. Remember to get rid of the spaces.

Italics
Italics, like bold can be done with the single asterix before and after what you want to say without the spaces. You can also use double underline. Like the bold tags you can use < i > Italics < / i > without the spaces.

~Strikethrough~
Use double tilde ~~ at the start and end of what you want to strike through, without the spaces to use a strikethrough

Lists
You can make a list using either bullet points or numbers. To do so you can use hyphens, or just the number with a full stop afterwards. It will automatically format it.

  1. Object one
  2. Object 2
  • Hyphen like this (-) will make your bullet point.

Highlighted Text
I'm not entirely sure what the name for the button is but it's to the left of the number 1 key). Wrap your text with it before and afterwards and you will get highlighted text

Blockquotes
If you want to use a block quote you can use the greater than key (>), but you must make sure that it's on a separate line above and below the quote

This is my quote. If you want to use inline quotes, so within a sentence, just use quote marks and you can use italics or bold to make the quote stand out if you like.

Using Line Breaks
If you put three hyphens (---) on their own with a free line above and below them, it creates a line break


Like above

While you can make headings using the headers tags as explained in just a second, you can just use a linebreak. If you type your header (This is my header) and press enter (return) and then make a line break (---) without the free line (like in the explanation above) then it will turn your text (This is my header) into a heading. It won't make the line break but it will make the heading bold and large.

This is my heading


Headings
If you want to make a heading or just size your text you can use H1, H2, H3, H4, H5, H6. When you use header tags you have to open it (Don't use spaces) < H 1 > and then close it < / H 2 > and make sure you use no spaces inside these tags.

< h1 > Like so < /h1 > (Don't use spaces)

This is h1

This is h2

This is h3

This is h4

This is h5
This is h6

Tables

Tags
Now, I don't actually know how these interact with the website, but if you use a hashtag (#) or the 'at' sign now known as the mention sign on different social media platforms (@) it will either use a tag or mention someone.

#steemit
@teleadan

Tables
Tables are easy, but finnicky. You have to use the line key, long line key? I don't know its name either, but it's to the left of the Z, on the backslash key. You have to shift + backslash to 'summon' it. It looks like this ( | ).

So far I've only been able to make a table with 2 columns, but potentially there can be more, I just haven't figured it out yet. This is what you type and then what it looks like:

What You Type
Table Heading 1 (Line) Table Heading 2
Hyphen Line Hyphen
Item 1 (line) Item 2
*Again, when I say (line) it means the key to the left of Z. This one ( | ).

The table will look like this

TABLE HEADING 1TABLE HEADING 2
Item 1Item 2
Item 1Item 2

Hopefully this little guide will be enough to get you going and improve the visual of your posts.