If your browser supports color, you should see have seen this lesson originally printed in red text. Except for the sponsored link at the top of the page, this page that you are now viewing has dark green links (instead of the standard blue links). If you click on one these links and then return to the same spot, the link becomes a "visited link". I changed the visited link color from the standard purple to a darker magenta. When you click and hold the mouse button on a link (don't release the mouse button), it is called an "active link". It represents the link that is currently being selected. The default color for an active link is red. In this lesson I changed it to a dark blue color. We will be discussing each of these situations later in this lesson. Keep in mind that the quality of color displayed in a browser is also dependent on the quality of the monitor being used. Thus colors in some browsers may not be as sharp as you might expect, or a color could be displayed in a slightly different shade than you might have intended.
Most, if not all browsers today support coloring the entire text, a block of text, changing the background color of a web page and changing the color of the links. This lesson is for those who have browsers that do support color in one form or another.
Because some people may still be using browsers that do not support
full color, or using monitors that do not support color (for example,
a black and white monitor), or using monitors that do not have at least 16 bit color
(which is the minimum you need), it is important that you do not rely
totally on color for emphasizing text. Remember that you are to design your
web pages also for content and not just for appearance. How a web page
looks in your browser will not necessarily be how it looks in another
browser. So if you want to use color for those browsers that
do support them (as I often do), that's fine, but if you want to
emphasize text, you must still use logical tags such as <STRONG>
and <EM> or a header tag. This way your text will still be
emphasized whether a browser supports color or not, or if a web page
is being viewed in a color or in a black and white monitor. Remember
also that some search engine indexers do rely on the header tags to
generate an overview of your web page and they will not be able to
get that overview if you use color instead. Color then should be
used only as an enhancement of your presentation.
Before we continue with this discussion, take a moment now and see a table giving a good range of colors and their corresponding codes. The table is in Lesson Ten. When you are ready to return here, just click on the BACK button.
Please send me to Lesson Ten to see the color table
Unfortunately, the numbers needed for the color codes are not in our number system which is the Decimal System or base 10. No, the numbers needed for any color code are written as Hexadecimals or base 16.
Our Decimal Number System uses the digits from 0 to 9 as in:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
There are 10 of these digits and our number system is based on these 10 numbers - hence the name "base 10". Once you go past 9, you combine digits as in 10, 11, 12, etc.
The Hexadecimal Number System uses 16 different digits before digits are combined (hence the name "base 16"). These 16 digits are:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Once you go past "F", you combine the digits as in 10, 11, 12, etc. Here is the direct comparison between the two systems:
DEC: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
HEX: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12
Note that "A" is our number 10, "B" is our number 11, "C" is our number 12, "D" is our number 13, "E" is our number 14, and "F" is our number 15. Continuing on, we have Hexadecimal 10 is our number 16, Hexadecimal 11 is our number 17, and Hexadecimal 12 is our number 18. Thus Decimal 11 = Hexadecimal B, Decimal 15 = Hexadecimal F, and Decimal 18 = Hexadecimal 12.
In the decimal number system, the intensity of each of the colors RED, GREEN and BLUE in a color code ranges from 0 to 255 (= a range of 256 numbers). 0 is OFF meaning it contains no amount of the color and 255 is FULL ON meaning full intensity of the color. Since the code for each of the three colors must be given as a Hexadecimal Code, the intensity for each color ranges from 0 to FF (Hex FF = Dec 255). In addition, the amount of each color must be given as a two digit code (2+2+2=6 digit code for the color). Thus 00 is OFF meaning that Hex 00 contains no amount of that color, while Hexadecimal FF is FULL ON meaning full intensity of that color. All the numbers in between Hex 00 and Hex FF give the millions of different colors. How many choices do you have? Well, if you have 256 choices for each colour and there are three basic colors (red, green, and blue), you have 256x256x256=16 777 216 different colors!
CONVERTING A DECIMAL NUMBER TO HEXADECIMAL
When you look at a color chart or palette in a paint program such as Paint Shop Pro, you will see that all the colors are given as decimal numbers. If you look carefully in Paint Shop Pro, you will also see an HTML box that gives the equivalent Hexadecimal value. For example, suppose you see a color you like and it says that the RGB index (intensities of red, green and blue) is 46, 250 and 34 respectively. Look in the HTML box and it will say #2efa22. This Dec 46=Hex 2e, Dec 250=Hex fa and Dec 34= Hex 22. As you will see later in this lesson, it is the 6 digit Hexadecimal value that must be used in the coding of a web page. Now if your paint program does not give you the equivalent HTML Hexadecimal value, or if you have a decimal number that you would like to know the Hexadecimal equivalent, here are three suggestions on how to do this.
Using one of these three methods, you should also find that Dec 250 = Hex FA and Dec 34 = Hex 22. Thus if the intensities of red, green, and blue are 46, 250 and 34 respectively, your Hex color code is "#2EFA22"
Here is a problem for you to try:
Problem 1: What is the Hexadecimal code if the RGB factor is Dec 99,255,128?
CONVERTING A HEXADECIMAL NUMBER TO A DECIMAL NUMBER
Although you would not convert from a Hexadecimal number to a Decimal number when creating color codes for web pages, I offer the conversion here for interest sake. To convert a Hexadecimal number to a decimal number, you can of course use a calculator that has this capability or you can use the computer's built-in calculator. Here is a quick and easy way to change a two digit Hexadecimal number into a decimal number. In a two digit Hexadecimal number, the first digit (or rank) has weight equal to 16 and the second digit (or rank) has weight equal to 1. For example, in the Hexadecimal number 9F, "9" is considered to be in the first rank and "F" is considered to be in the second rank. Therefore the Hexadecimal number 9F = 9x16 + 15x1 = 144 + 15 = 159. Thus Hex 9F = Dec 159. Recall that Hex F is equal to Dec 15 and that is why we have 15x1 since F is in the second rank of 9F.
Using the above reasoning we have Hex FF = 15x16 + 15x1 = Dec 255.
Also, Hex C4 = 12x16 + 4x1 = Dec 196. Since Hex C = Dec 12 and it is in the first rank, we have 12x16.
Problem 2: What is the Decimal number if the Hexadecimal number is 7B?
This is the command to change the background colour:
BGCOLOR stands for BackGround COLOR. Note that BGCOLOR is a BODY attribute. In other words, BGCOLOR is supported by the BODY tag as you will see in the example document given below. Also note that the # symbol is part of the code. Leaving out the # symbol is considered a poor coding practice.
As stated in the above "hexadecimal versus decimal" section, RR stands for the intensity of RED in the color, GG for the intensity of GREEN, and BB for the intensity of BLUE. Here are some basic color codes:
Here are some additional codes:
Thus to get a white background, the command is:
<BODY BGCOLOR="#FFFFFF"> as in:
You can use any color code you like and the table in Lesson Ten gives a range of sample colors and their corresponding Hexadecimal values.
Problem 3: Using one of the above codes, what is the command line if you want a full intensity blue background and no amounts of red and green?
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow
Changing the color of all the text is done through the BODY tag. This also applies to text links. If you include the links, you can change the color up to four levels.
Here are the attributes of the BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color of all the text on the page (full page text color.)
LINK="#RRGGBB" to change the color of all the links on the page (from the standard blue color.)
ALINK="#RRGGBB" to change the color of all Active links (from the standard red color). This color occurs when you click and hold down the mouse pointer over a link. ALINK stands for Active LINK. That is, ALINK represents the link that is currently being selected and this link is highlighted with the color defined in the ALINK value.
VLINK="#RRGGBB" to change the color of all the links after they have been visited (from the standard purple color). VLINK stands for Visited LINK.
You should keep in mind that some people are used to seeing blue links and purple visited links. When they see blue underlined text, they automatically associate this with a link. Changing these colors could cause some confusion. So do use these color attributes with care - that is, don't over do it.
Problem 4: Give the BODY command line that gives a WHITE background, RED text, GREEN (lime) links, BLUE active links, and MAGENTA visited links.
To change the color of only a portion of text (a block of text), use the formula:
<FONT COLOR="#RRGGBB">text text text</FONT>
where RRGGBB represents the Hex code of your desired colour. FONT is a container element and so anything between the opening and closing FONT tags will be changed to the specified color. The closing tag, </FONT>, restores the previous text color.
Problem 5: Write the command line that produces the following line in your browser with the words "Firefox and Internet Explorer" in blue:
Among the most popular browsers are Firefox and Internet Explorer. Both can be downloaded from the internet.
None of the browsers which support the FONT tag, allow their users to disable it. Yet it is possible for a user to disable BODY colors. This means that if you use FONT COLOR to change font colors and the viewer has overridden your BODY colors, the text may wind up invisible.
One final suggestion: If you plan to use the FONT tag with a HEADER tag, you should place the FONT tag in front of the HEADER tag and not the other way around. For some reason, a number of browsers that do not support the FONT tag for color, won't support the HEADER tag either if the HEADER tag is not placed right before the heading. In other words, the HEADER tag will work in:
<FONT COLOR="#FF0000"><H2 ALIGN="CENTER">heading</H2></FONT>
but will not work in:
<H2 ALIGN="CENTER"><FONT COLOR="#FF0000">heading</FONT></H2>
This web page has a blue stucco background. That is, this web page has an image for a background and this image was created as a blue stucco image. When an image is used for the background of a web page (that is, when you see the background of a web page wallpapered), it is actually one small .gif or .jpeg (or .jpg) image repeated over and over again. Here is the actual full size image I used for the blue stucco background:
You will see this little image named blue_stc.jpg better if you go back to the Lesson 9 that took you here where the image and the background are not the same. This little image was repeated over and over to make up the blue stucco background. If you look closely at a web page with an image for the background you will often see the repeated patterns. In my blue stucco background you will likely not see the repeated patterns (that is, the repeated blue stucco image) because the nature of this stucco background creates a seamless pattern.
You can compare placing an image for the background of a web page to wallpapering a wall in your home. By the time the wall is covered with wallpaper, it looks like one large sheet of wallpaper, but in fact is made up of several narrow sections of paper, in which the seams are place together in such a way that the patterns match.
Although the background wallpaper is made up of several smaller .gif or .jpeg images, it is loaded as one file and is a BODY attribute. If you want to save the wallpaper (and your browser lets you), just do it in the same way you save any image. For example, just click anywhere on the stucco wallpaper with the right mouse button and then choose SAVE AS... You can then save it to any folder, even changing the name if you want to.
The command to bring in a background image is:
where "image.jpg" represents the name of the image. Note two points with this BACKGROUND attribute:
Here is an example of a BODY tag that changes all the text to red, the links to a darker green, the active link to blue, the visited link to a darker magenta, with a stucco background (which is the one I used).
<BODY TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc.jpg">
You can have these attributes in any order and you do not have to use all of them. However, as we learned earlier in this lesson, if you set one attribute, you should set them all to avoid possible conflicts with a viewer's default values.
Note that an image for a background will result in your web page taking longer to load than a web page with no image for a background. That is because it is an image and images take longer to load. I have seen some very large images for backgrounds that result in web pages taking far too long to load. This can turn off visitors who may leave your website before the page is finished loading.
You can also control the background color while the web page is loading the background image. For example, if you do not want that gray background while the background image loads, you could change it to a white (or some other color) background. As soon as the background image appears, it will wipe over the white background. For example, the following BODY tag is the same as the above one except that the background color will be white while the stucco background loads (the same as my stucco example you visited). Try different colors and you will get different effects.
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc.jpg">
You are encouraged to include the BGCOLOR attribute along with the BACKGROUND attribute because if the background wallpaper image cannot be displayed by the browser, the color specified in BGCOLOR will be used.
You can create your own image backgrounds or you can take them
off the net. There are several places where you can find background
images that are free to take. Just go to your favorite search engine
and do a search for "free background images".
Every once in a while I get an email asking me for the coding to prevent the background image from scrolling with the text. In other words, they would like to see the background image in a fixed position with the text and images scrolling over top of it. Well, to prevent the background image from scrolling (and thus also preventing the image from repeating itself over and over again), you use the BGPROPERTIES attribute as in:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" BACKGROUND="blue_stc.jpg" BGPROPERTIES="fixed">
Note: The BGPROPERTIES attribute will only work
in Explorer browsers as BGPROPERTIES is an Explorer attribute. In other words,
Netscape do not support the BGPROPERTIES attribute
and so will ignore the attribute and scroll the image with
the text. Therefore it is a good idea to also see what your web page will look
like in Firefox or what it will look like without the BGPROPERTIES
attribute. Unfortunately there is no similar attribute that can be used for
Firefox and Netscape browsers.