BEGINNER CODING TIPS | Part Three | Formatting Paragraphs

in #steemit7 years ago (edited)

Beginner Coding .jpeg

How to Format Paragraphs of Text

In the previous two coding tips, we looked at how to change the style of the text. For a recap, please visit:

Why have I created this series?

This section is for new readers of the beginner coding series!

I appreciate that many people understand coding (so if this applies to you, then thanks for stopping by and feel free to correct me in the comments below, or share some additional advice! :D)!

So I met a steemit user called @joeyarnoldvn who commented on one of my previous introduction posts. He gave me a great idea to learn a bit of coding each day so that it is not too overwhelming. Well, I am a believer that knowledge should be shared and so I am sure there are steemit users who are at the same 'coding level' as myself. These posts are for you :D

Every day I will learn a new coding technique and share what I have learned with you!

Your posts will look soooo much better if you learn how to use code to format them.

Again, if you have followed my previous posts, you can jump down to the next section!

Anyway, I used to know the VERY BASICS of coding while at school, and I personally found it super interesting! However, fast-forward that 10 years and I am completely out of practice!

So now I want to refresh my coding skills by learning coding all over again. AND I truly feel that we SHOULD all be making an effort to learn and understand code. The future of technology is so exciting, so we should be embracing it rather than shy away from it!

If you can relate to this, and would love to learn slowly but surely with me, then give me a follow and keep an eye out for my future coding posts :)

Learn how to format paragraphs


Today, we are going to learn how to:

  1. Create bulleted and numbered lists
  2. Align text; left, right and center

1A: Create a numbered list

Use the following code without the spaces

< ol >
< li > insert text here < / li >
< li > insert text here < / li >
< / ol >

1B: Create a bulleted list

< ul >
< li > insert text here < / li >
< li > insert text here < / li >
< li > insert text here < / li >
< / ul >

You can differentiate between bulleted and numbered lists by using:

  • "ol" for ordered lists aka numbered lists
  • "ul" for unordered lists aka bulleted lists

Screen Shot 2018-03-05 at 09.14.40.png

2: Align text; left, right and center

p {
text-align: center;
}

These are the traditional values for text-align:

  • left - The default value. Content aligns along the left side.
  • right - Content aligns along the right side.
  • center - Content centers between the left and right edges. White space on the left and right sides of each line should be equal.
  • justify - Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.
  • inherit - The value will be whatever the parent element's is.
"Content" is used here as as term instead of "text", because while text-align certainly affects text, it affects all inline or inline-block elements in that container.

Screen Shot 2018-03-05 at 09.16.04.png

That's all for now!

So what are you waiting for? Have a go at styling your text and remember to tag me in your posts -I would love to see!

If you enjoyed reading this post, don't forget to upvote it AND leave a little comment :) I love getting to know you all and networking, especially as a newbie!

Wishing you a wonderful week ahead!

Namaste!

Vibrant_Yogini_Signature

P.S. Don't forget to check out my other posts :)

Sort:  

Very educative post, I have gone back to your post,on how to make bold,and the text format, will practice them,I have learned something new today.How do make header larger ?

Hi Carkia, that's great i'm really pleased it has helped you! :D

You can use:

< h1 > insert text here < / h1 >

Remove the spaces!

H1 is the largest size, then the size drops for H2, then H3, and so on forth. :)

Coin Marketplace

STEEM 0.18
TRX 0.15
JST 0.029
BTC 62820.16
ETH 2438.32
USDT 1.00
SBD 2.69