Enhancing Initial Character: The Storybook Effect

Sometimes it's nice to just spice-up your blog with a subtle accent by highlighting a specific word or character in your text. I particularly like to make the first letter of the initial paragraph stand out, what I refer to as the 'storybook effect'

<strong style="font-size: 35px; font-family: lucida grande; float: left; margin-right: 4px; line-height: 1em; color: #840052; background: #DEBDDE; padding: 0 5px; font-weight: normal; border: thick;">I</strong&gt


Suppose you had a sentence beginning with: It was many, many years ago...

Here's how you would use this HTML:

<b style="font-size: 35px; font-family: lucida grande; float: left; margin-right: 4px; line-height: 1em; color: #840052; background: #DEBDDE; padding: 0 5px; font-weight: normal; border: thick;">I</b>t was many, many years ago, as I set out on a journey that I will remember for the rest of my life. It was extraordinarily cold and windy on the early November morning. I woke up around 3 am...

The previous would yield:

It was many, many years ago, as I set out on a journey that I will remember for the rest of my life. It was extraordinarily cold and windy on that early November morning. I woke up around 3 am…

Or how about the entire phrase (just move '</b>') to the end:

It was many, many years ago…

Where color: #DEBDDE; is a purple letter and background: #840052; is a square background color (a type of lavender in this case). If you aren't interested in learning the hexidecimal codes for colors, you could substitute for #DEBDDE; any of 16 preset colors by name (ie plain english) as follows:

Silver,Gray,Maroon,Green,Navy,Purple,Olive,Teal,
White,Black,Red,Lime,Magenta,Yellow,Cyan

Bookmark 'How to Add Color to Page HTML' on Delicious

Looking for other HTML? Go to: http://write-html-code.blogspot.com/