Adding Background Color to Text

Using different colors for your text is nice, especially when you have some text that needs to be emphasized, but sometimes you just want to jazz up your blog by breaking up the sections with a little background color. Here I will show you the basics to do that.



First, an overview of the HTML :


<p style="padding: 5px; background-color: #C6EFF7; border: dotted 1px blue;">A pastel blue color with 2 pixel padding and a 1 pixel dotted border in blue.</p>

Which yields this:

A pastel blue color with 2 pixel padding and a 1 pixel dotted border in blue.

Or, to make it a little more fancy:

<p style="padding: 5px; background-color: #E78CC6; border: dotted 5px Purple;"><b style="color:#6373B5; font-family:lucida grande;font-size:24pt;">A pastel Purple with 5 pixel padding and a 5 pixel dotted border in purple. And a deep blue font in bold, 24 point.</b></p>


Which yields this:

A pastel Purple with 5 pixel padding and a 5 pixel dotted border in purple. And a deep blue font in bold, 24 point.

To see more on this topic in greater detail go to: Box Style Properties

Edit color and border and select and copy for your blog:

<div style="background-color: #e78cc6; border: 5px dotted Purple; padding: 5px;"> <b style="color: #6373b5; font-family: lucida grande; font-size: 24pt;">A pastel Purple with 5 pixel padding and a 5 pixel dotted border in purple. And a deep blue font in bold, 24 point.</b><br /></div>
Command-A/command-C to copy (Mac) | alt-A/alt-C (Windows)

Give me your opinion on my site: hyperscripter@gmail.com or http://twitter.com/hyperscripter

For more on HTML go to http://www.scriptsforapple.com/html-examples/