Box Style Properties

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)
 

Stumble 'How to Add Color to Page HTML'

<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|outset with 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:
 
<div style="background-color: #21005a; border-style: ridge; border-width: medium; color: #c6b5de; padding: 2%;"><span style="font-family: Trebuchet MS,Georgia,Palatino; font-size: 18pt;"><i></i></span></div>

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

Add 'How to Add Color to Page HTML' to Technorati Favorites



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/
0 comments
Related Topics: , , , , , ,

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



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

0 comments
Related Topics: , , ,

Adding Color to Tables


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
0 comments
Related Topics: , , , , , , ,

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:


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


0 comments
Related Topics: , , , ,

Adding Color HTML to Your Text

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:



Stumble 'How to Add Color to Page HTML'


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


Add 'How to Add Color to Page HTML' to Technorati Favorites

0 comments
Related Topics: , , , , ,
Subscribe to: Posts (Atom)