adding backgrounds, titles, and vertical lines in posts

If you have an extremely uninteresting post, or something that just lacks something - try adding some snazzy embellishments. I was extremely jealous of all those amazing bloggers who added quote boxes. It looked so clean and professional - and after a bit of experimenting, I figured out how to do it! So hold on to your socks and you can learn too!

The first thing you'll need to know is the beginning of all post embellishments. The most simplified version the code can get:

<div style="code here">text here</div>

This is the basic code used to make titles, different fonts and sizes, quotes boxes, vertical lines, et cetera.

Quote Boxes

Using the basic code I showed you previously, we are going to build on that code in order to make a quote box. Between the quotations, we are going to add something like this:

background: #eeeeee; border: 1px solid #dddddd; padding: 10px;
All together, it should look like this:

<div style="background: #eeeeee; border: 1px soild #dddddd; padding: 10px;"></div>
Changing the background and border colors is pretty simple. If you want the background pink just put in "pink" the shade of pink you would get would be:

something like this

Same goes for basically any other color. If you wish to have a different shade of color check out this link.

Post titles in a Post

Once again, we'll start with the basic code. Then, we'll build on that code inside the quotations:

font-family: perpetua; font-size: x-large; border-bottom: 1px solid #eeeeee; color: pink;

Thus, when the code is all together it will look something like this:

<div style=" font-family: perpetua; font-size: x-large; border-bottom: 1px solid #eeeeee; color: pink; ">your text here</div>

The font-family can be changed to any font usually on a computer (such as, Century, Times, Andalus, et cetera). The font-size can be switched to any font size. 100px, x-large, normal, large, small, x-small, et cetera.

You could have a border-bottom, or an entire border - be creative! If you wish for the title to be centered, simply wrap the code with this:

<center>entire code here</center>

Vertical Lines

By this time, you probably have guessed how to do this. In case you are wondering just what a vertical line looks like - see below:

it will look like this

Starting with the starting code in the quotations you will add:

border-left: 3px solid #dddddd; padding: 10px;

All together it should look like this:

<div style=" border-left: 3px solid #dddddd; padding: 10px; ">your text here</div>

And there you have it! If you have any problems, please tell me!