How+to+Add+Color+to+Your+Webpage

Now that we've learned how to use common tags as well as giving our page a title it is time to add some pop to our page! Let's try our hand at adding some color! Before we get right to it let's first make sure we understand that when picking your color scheme - meaning your background color, text color, link color, etc... - you need to remember it's not just about picking your favorite color. You have to make sure it is easy on the eye for your visitors. Make sure the colors you choose are easy for the reader to read and that the scheme makes for a pleasing website appearance.
 * How to Choose Your Color Scheme **


 * Color Codes **

Colors are like numbers in that there are an infinite amount. Ok, well actually there are 16 million different colors you can choose but that's seems close enough to infinity for our purposes. They way we choose the precise color we want we have to use color codes. Color codes are 6 digit codes consisting of numbers and/or letters. These codes are called hex values. Here are the hex values for what is known as web-safe colors:


 * ~ Color ||~ [|Hex] (RGB) ||
 * White || #FFFFFF ||
 * Silver || #C0C0C0 ||
 * Gray || #808080 ||
 * Black || #000000 ||
 * Red || #FF0000 ||
 * Maroon || #800000 ||
 * Yellow || #FFFF00 ||
 * Olive || #808000 ||
 * Lime || #00FF00 ||
 * Green || #008000 ||
 * Aqua || #00FFFF ||
 * Teal || #008080 ||
 * Blue || #0000FF ||
 * Navy || #000080 ||
 * Fuchsia || #FF00FF ||
 * Purple || #800080 ||

Not satisfied with these colors? Stop by Wikipedia's page on Web colors. There they have a chart full of different colors and their hex value.

You can change the colors of every element of your web page which includes:


 * text color
 * headline color
 * hyperlink color
 * active hyperlink color
 * visited hyperlink color
 * page background color
 * table background color
 * table cell background color


 * Now Let's Color Code! **

Let's open the last file we made when we first learned how to bold, italicize, and underline as well as how to give our page a title. Choose a color for your background and text and note the hex value for each. Replace the body start tag with the following code and enter the hex value for the background (bgcolor) and text within the quotation marks like so.



You can test out your code by saving your .txt file as an .html file. This is common practice to do when coding. You can start by calling your first test file test.html and then subsequent test files. (Example: test1.html, test2.html, test3.html, etc...) If necessary, keep playing around with your color combinations until you find a good color scheme.

With the code we just entered that sets the tone for the rest of the text. However, if you want to change the text color of just a word, sentence, or paragraph to something else other than what the rest of your page is there is a way to do that. Let's go to the last sentence of our .txt file and change it to a different color.


 * Soon I will be able to call //myself// a //Web Designer//**

As you can see this sentence is already bolded and italicized. After the paragraph and bold tag for the sentence let us stick in the  tag. The way that is coded is as follows:



We end the  tag with a backslash like so:



This should go right before the bold endtag. Once again test out your page by saving it as a test.html file until you like the way the color looks.

While we are at it why don't we add the other things we learned so far in this class onto the list in this .txt file.

Congratulations! You now know how to spice up your page with color!