So...you want to add some color to your pages. You can add color to the background of your pages, color to your fonts, color to your frames, tables and horizontal rules...lots and lots of color!
Right now we will concentrate on adding color to the background of your page. The first code we will learn is the bgcolor code. This stands for BackGround Color, and is part of your BODY tag. This mean it gets added to your body tag. We never, I repeat never, will have more than ONE body tag.
Color is an attribute. Think of the attribute as an adjective...it describes something. Body is a noun. We now have a body to our document, what color is the background going to be? Pink? Red? Blue? Green? All these colors are adjectives of the noun...body.
Attributes always go inside quotation marks ( " " ). This is one of the rules we will be learning with HTML coding.
The code will look like this: <body bgcolor="Color">
We will not actually key in the word Color, like it is here...we will need to find a color by it's RGB (Red, Green, Blue) value. This value is a six digit number and letter combination that represents a color. The six digits are actually three, two digit numbers in sequence, representing the amount of red, green or blue as a hexadecimal value in the range 00-FF (that's number Zero to letter F...no letters O). Hexidecimal is base 16 (not base 10). For more on Hexadecimal colors check out this page on Doug's site.
A color that starts with 00 has no red and a color that ends in 00 has no blue. A color that starts with FF has full red and a color with FF as its middle pair of digits has full green. There are 16 million codes (or colors) now available. Wow!
Remember that not every browser or computer will display colors the same way. Many factors can change the way a color will appear on someone else's computer.
Now what colors are what? Here is a chart with the most common colors used and their RGB value. Note that the letters in the colors can be in upper or lower case.
| Color Name | Color RGB Value |
|---|---|
| Black | 000000 |
| White | FFFFFF |
| Red | FF0000 |
| Blue | 0000FF |
| Lime Green | 00FF00 |
| Pink | FF00FF |
| Yellow | FFFF00 |
| Orange | FF7F00 |
| Dark Blue | 000080 |
| Dark Orchid | 9932CD |
| Brown | A62A2A |
Please watch what color you use for your background. If you use a darker color you will need to use a lighter color for your text and vice versa.
Here are some links to other sites with color codes you can print out or bookmark to use later.
Now...let's add some color to the text we are going to type on our page. With these codes, all the text on the page will be the same color. Choose a color that will be a contrast to the background color on your page, otherwise it will be too hard for your visitors to read. Later on we will get into changing one or two words or lines to a different color.
Again we will be adding code to the BODY tag...just like we did above. The body tag will be getting longer and longer. :o]
Our code looks like this for a yellow background:
<body bgcolor="ffff00">
Let's add some text color with the TEXT=" " tag...dark blue...here is the correct code:
<body bgcolor="ffff00" text="000080">
Going on here...let's add another color for our links. See how my links to the color pages above are a different color text? This is because I coded my page to do this. Let's make our link color the same blue as the links on this page. Again we are going to add a line to our body tag, the LINK=" " tag, like this:
<body bgcolor="ffff00" text="000080" link="0000ff">
One more...the Visited Link Color. This is when you have visited one of the sites on the page you were just on. Once you click on the link and then go back to the original page, the color of the link changes. This shows you that you have already been to that site. Now, all you have to remember which is which! :o] Believe me after visiting a few sites this can get challenging. The Visited Link code is VLINK=" " and appears in the body tag like this:
<body bgcolor="ffff00" text="000080" link="0000ff" vlink="ff00ff">
This will change our lighter blue link color to the color pink, and will be viewed after we return to the page. Try it out now...click on one of the links above (for the color codes) and then hit the back button on your browser. See the color change? Neat, huh?
Okay...let's add some text to our page so we can see the color of the text on the background. Note, you will not see the link color until we get to that lesson.
Add this line...or what ever line you would like...between the two BODY tags. Remember our first Body tag has grown with all the colors we added to it and the closing body tag has the slash in front of it.
Hi, my name is (add your name here) and I live in (your city/state). I love (add your favorite food, movie, etc. here).
Okay...now I want you to Save these changes in your document (Saving tips). Open your current document (index.htm) and add the above codes and text line to the document, then just save on top of that. After making changes, at any time, remember you will need to hit the refresh or reload key on your browser window to 'see' the changes.
Please use the email link below if you have any questions about your lesson.
