An Important Note about Choosing Colors for Your Pages
It’s exciting to be able to use so many different colors for your Web pages, but please make sure that the colors that you choose enhance your pages. You do not want to make your color choices create difficulties in reading your Web pages. Here is a good rule of thumb:
If you choose text and background colors other than black and white, choose a light background color and a dark text color OR choose a dark background color and a light text color.
If you do not follow this rule, unfortunately, you will probably create pages that will be very difficult to read.
Background and Text Colors: Examples
Here is the code to produce a page with a background color of black and a text color of yellow:
<HTML>
<HEAD>
<TITLE>
Black Background With Yellow Text
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFF00">
<P>This is a page with black background and yellow text.
</BODY>
</HTML>
Click here to see what this page looks like.
The interesting thing about the colors black and yellow is that if you look at the list above, they are 2 of the 16 colors that can be identified in HTML by their English names. The code below will produce the same results as the code above:
<HTML>
<HEAD>
<TITLE>
Black Background With Yellow Text
</TITLE>
</HEAD>
<BODY BGCOLOR="black" TEXT="yellow">
<P>This is a page with black background and yellow text.
</BODY>
</HTML>
Click here to see what this page looks like.
Now let’s try some different hex-codes. Here is a page that contains a light blue background with dark blue text.
<HTML>
<HEAD>
<TITLE>
Light Blue Background With Dark Blue Text
</TITLE>
</HEAD>
<BODY BGCOLOR="#CCFFFF" TEXT="#330099">
<P>This is a page with light blue background and dark blue text.
</BODY>
</HTML>
Click here to see what this page looks like.
And finally, here is a page with light yellow background and dark green text.
<HTML>
<HEAD>
<TITLE>
Light Yellow Background With Dark Green Text
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#336633">
<P>This is a page with light yellow background and dark green text.
</BODY>
</HTML>
Click here to see what this page looks like.
Changing Specific Word Color
You might be thinking, “Well, this is great, but I only want to change one word's color!” You’re right. There are times when you only may want to change the color of one word or one section of text, without changing the color of every word on the page. Fortunately, HTML enables us to do this.
Remember the FONT command from last week? We learned how to use the FACE attribute as well as the SIZE attribute. The font command also has a COLOR attribute that we can use to change the color of some text on a page.
Here is the code that you would use:
<FONT COLOR="#HHHHHH">text text text text text</FONT>
Notice that when you want the color to change back, you end the text with the </FONT> end tag. Now, please take a look at this very short page and see if you can figure out what the page would look like:
<HTML>
<HEAD>
<TITLE>
The Colors of the United States Flag
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFF00">
<P><B>The colors on the flag representing the United States of America are <FONT COLOR=”#FF0000”>red</FONT>, <FONT COLOR=”#FFFFFF”white</FONT> and <FONT COLOR=”#0000FF”>blue</FONT>.
</BODY>
</HTML>
Click here to see what this page looks like. Was your prediction correct?
