Lesson 5: Adding Colors

Adding colors to your web pages could achieve certain visual effect and make them more attractive. However, you must select colors carefully and do not overuse them. You can add color to your web page background and the text as well.

5.1: Adding Color to the Background  of the Web Page

You can specify the color of the page's background within the body tags using the following code:
              <body bgcolor=color>

The color attribute can be specified using normal words like red, yellow, blue etc. or by hexadecimal codes. Hexadecimal is a base 16 number system. Hexadecimal uses A for decimal 10, B for decimal 11, C for decimal 12, D for decimal 13, E for decimal 14 and F for decimal 15. Every color code in HTML is made up of 6 hexadecimal digits, from 000000 to FFFFFF. The hexadecimal codes might seem very complex, however, they actually make up of combination of three primary colors, i.e. red, green and blue(RGB). The last two digits specify  the amount of red color, the middle two digits specify the amount of green color and the first two digits specify the amount of blue color.
For example:

0000FF=maximum red            00FF00=maximum green      FF0000=maximum blue.

For other combinations, click here for the RGB color codes.

Now, try out the following page:
 
<html>
<head>
<title>Background Color</title>
</head>
<body bgcolor=red>
The background color of this web page is red. You can change the background color anytime by changing the color attribute specified by the bgcolor code. Try using the hexadecimal codes like bgcolor=FF00CC.
</body>
</html>

Copy and paste the above codes to your notepad and save as bgcolor.html.
Click here to view the sample output.
 

5.2 Adding color to the text.

5.2.1 Specifying  the Color of the Normal Text

You can specify the color of the normal text  (the default text is black) using the following code within the body tags.

<body bgcolor=blue text=white>

You may use normal words for the color attribute or use hexadecimal notation.

Now, try the following
 
<html>
<head>
<title>Text color</title>
</head>
<body bgcolor=blue text=FFFFCC>
The text color can be formatted using the text=color code. It is important that the color of the text is not the same as the background color, otherwise you won't be able to see the words.
</body>
</html>

Copy and paste the above codes to your notepad and save the file as txtcolor.html
Click here to see the sample output.

5.2.2 Formatting  Individual Font Color with the Font Tag

If you wish to add color to an individual character, word, sentence or paragraph, you may use the font tag. Font tag can also control font size and type of fonts.

The codes are as follows:

<font color=red>Red color text</font>
<font size=1 color=blue>Blue text with font size 1</font>
<font type="Times New Roman">Text in Time News Roman</font>

Now, copy the following codes and paste them into your notepad and save the file as font.html.
 
 
<html>
 <head>
 <title>Manipulaton of Fonts</title>
 </head>
 <body bgcolor=CCFFFF  text=blue>
 <font color=red size=4>Manipulation of </font><font color=brown size=4>Fonts</font>
 <hr>
 <p>
 <font color=green type="Arial"  size=2>You can manipulate font color , size and font type using 
 the font tags</font>.<font color=AA0000 size=2 type="Times New Roman">It can be done fairly 
 easily by anybody. Most important you must try it out yourself and dare to experiment with 
 anything.</font>
 </p>
<hr>
This part of the text will appear blue.
 </body>
 </html>
 

Click here for the sample ourput.

[Back to Main Page]