How to Add Color to Page HTML

Box Style Properties

2009-12-25T06:57:00.013-05:00

Here's some color HTML that's just a lot of fun and can add some neat effects to your page and give it a more professional look.

When I learned how to do this stuff, I just had to share it with everyone.

Here's a basic text box for starters:

The HTML for this looks like this: <div style="border-style: ridge; border-width: medium; color: teal; padding: 10%;"></div>

This one with a color background 'background-color: #c6e7de;':

The HTML looks like this: <div style="background-color: #c6e7de; border-style: ridge; border-width: medium; color: teal; padding: 10%;"></div>

Where 'div' is the main enclosing tag (don't for get to close it.), 'background-color' is the fill color of the box, 'ridge' is the style of the border (see alternate border styles below) 'border-width' is medium, the color of the text itself is teal (a sort of greenish-blue) and 'padding' is the space between the border and the enclosed elements (text in this case)

<div style="background-color: #9c2994; border-style: double; border-width: thick; color: #debdde; padding: 2%;">A text box with 'double' border style and 2% padding (notice how the border is closer to the text now)</div>

These are the border styles that you could use: dotted|dashed|solid|double|groove|ridge|inset|outsetwith the HTML border-style: [the style]; Remember that the element and it's attribute are separated by a colon and each element-attribute pair is separated by a semicolon. Also remember that all of the style elements are enclosed in quotes.

Another example:

A text box with 2% padding, thick border width, inset border style with text in bold, 12 pt, hex #ffffff (white) and a background color of hex #ffB573.

Finally, add font styling and you have something spectacular:

Note that I use 3 different fonts here: 'font-family: Trebuchet MS,Georgia,Palatino;' This is a good practice. It tries to use 'Trebuchet MS' font, but if that is not on the current users system, it tries to use 'Georgia' and so on.

If that was not enough, here's something you can do combining all of this with an image:

This is an image of a flat-screen iMac G5. It follows the original compact design reminiscent of the first Macintosh that rolled off the line in 1984. I still own one of them and it still works like brand new. The HTML 'float: left;' forces the image to the left and allows the text to flow to the right

The HTML for this:
Command-A/command-C to Copy

Please leave me a comment. Tell me what you think of this site, or click on the Technorati or Stumble 'Thumb this Up!' buttons above to submit this site as a favorite.

For more HTML go to: http://write-html-code.blogspot.com/

Enhancing Initial Character: The Storybook Effect

2009-12-18T10:26:00.024-05:00

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 mylife. It was extraordinarily cold and windy on that early Novembermorning. 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/

Adding Color to Tables

2009-12-17T06:53:00.004-05:00

An example of HTML for tables with background color:

<table style="align:left;width:140px;margin-top:1px;margin-bottom:1px;margin-left:1px;margin-right:1px;" border="2" cellpadding="2" cellspacing="1">
<tr bgcolor="#082984"> <th> Name </th> <th> Address </th> <th> City </th> <th> State </th> <th> Zip Code </th> <th> Phone # </th> </tr>
<tr bgcolor="#00A5C6"> <td>Joe Miller</td> <td>1436 Bay Shore Dr</td> <td>Chicago</td> <td>Illinois</td> <td>60622</td> <td>1-345-234-5678</td> </tr>
<tr bgcolor="#00A5C6"> <td>Bill Thomas</td> <td>568 Dayton Circle</td> <td>Columbus</td> <td>Ohio</td> <td>43215</td> <td>1-614-386-9849</td> </tr>
<tr bgcolor="#00A5C6"> <td>Paula Schmidt</td> <td>986 Noble Oaks Blvd</td> <td>Chicago</td> <td>Illinois</td> <td>60622</td> <td>1-206-419-3876</td> </tr>
</table>

Which looks like this:

Name	Address	City	State	Zip Code	Phone #
Joe Miller	1436 Bay Shore Dr	Chicago	Illinois	60622	1-345-234-5678
Bill Thomas	568 Dayton Circle	Columbus	Ohio	43215	1-614-386-9849
Paula Schmidt	986 Noble Oaks Blvd	Chicago	Illinois	60622	1-206-419-3876

Edit the table, then select and copy it for your blog:

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/

For JavaScript: http://write-javascript-code.blogspot.com/

Adding Background Color to Text

2009-12-16T08:03:00.005-05:00

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:

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/

Adding Color HTML to Your Text

2009-11-09T12:54:00.001-05:00

A sample of the table of hex color codes:

#FFC6A5	#FFE7C6	#FFFFC6	#F7FFCE	#DEF38D	#CEEFBD
#C6E7DE	#C6EFF7	#BDC6DE	#C6B5DE	#DEBDDE	#F7BDDE
#FFFFFF	#FF9473	#FFCE9C	#FFFF9C	#EFF8AD	#C6EF8C
#A5DE94	#94D6CE	#94D6E7	#949CCE	#9C7BBD	#CEB4C6
#E7BCC6	#E0E0E0	#FF6342	#FFB573	#FFFF6B	#E7F784
#ADDE63	#7BC66B	#7BC66B	#63C6DE	#6373B5	#7B52A5

For a complete list of colors with their hex codes, go to Color Hex

If you like one of these colors, you can select and copy it to use in one of the code examples below.

This is old (deprecated), but still works. The code looks like this:

<font size="2" face="Verdana">
Your text here.
</font>

Your text here.

This is better. The HTML looks like this:

<p style="font-family:verdana;font-size:80%;color:green">
Your text here.
</p>

Which yields this:

Your text here.

Edit font and color, then select and copy it for your blog:

Or you could even do this:

<b style="font-family: lucida grande;font-size: 24pt;color: #FFC6A5; ">Your text here.</b>

Your text here.

Or even this:

<i style="font-family: lucida grande;font-size: 24pt;color: #083194; ">Your text here.</i>

Your text here.

And finally, this:

<p style="font-family: lucida grande;font-size:36pt;font-style:italic;color:#FF0000;">Your text here.</p>

Your text here.

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