How To Make A Coloured Text Box

  How to make a coloured text box is probably the most frequently asked question that I receive. To make things a little easier on myself from not having to explain it over again, I wrote up a tutorial. Hope someone finds this useful =D

 These codes work great with blogger.


First method:

This is for a coloured box wrapped (with text written inside) around an image.

* note the image address can be found by adding the image to a blog post, switching over to the html tab and copying its URL.

<br/>
<a href="IMAGEADDY" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img style="border-style:none;" src="IMAGEADDY" width="206" /></a>
<br/>
<br />
<center>
<div style="background-color: COLOUR; border: 3px solid black; color: black; font-size: 18px; height: 300px; width: 510px;">
<br />
<b>
<br />This is where the text will go.<br/>
</div>
</center>
<br/>

Finished product will look like this:

(I chose royalblue for the colours in both examples)

This is where the text will go.

Second method:
A simple box

<center>
<div style="background-color: BACKROUNDCOLOUR; border: 3px dashed BORDERCOLOUR; color: black; font-size: 18px; height: 300px; width: 510px;">
<br />
<br />This is where the text will go.<br/>
</div>
</center>

Finished product will look like this:

This is where the text will go.

  If you would like rounded corners just add, border-radius: 20px; into the code above, in between colour; and border: 3px

The higher the number for border-radius, the rounder the corners of the "box" will be. Same thing for the border. The higher the number, the thicker the border.

  The other thing that cane be changed it the border style. In the first method it shows the border as solid and in the second method it shows as dashed. It's fun to play around with these different borders to change things up a little. Here's a list of some that you could try.

• Solid
• Dashed
• Inset
• Outset
• Dotted
• Double
• Ridge
• Groove

  Play around with the code to make it meet your needs and add them to your post in the html tab. You will most likely need to change the heights and widths to fit your blog. If I left anything out or if you have a question, just give me a shout. Oh and make sure its copied exactly or it won't work, with the exception of colours, sizes and numbers. Here is the site I use when looking for colour codes  http://www.computerhope.com/htmcolor.htm