Lesson 5: Adding Colors to a Web page
Adding colors to your web pages could achieve a certain visual effect and make them more appealing. However, you should 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 Colour to the Background
You can specify the color of the page’s background using the bgcolor attribute of the body element, as shown below:
The color attribute can be specified using normal words like red, yellow, blue etc. or by using 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 a 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.
0000FF=maximum red 00FF00=maximum green FF0000=maximum blue.
For other combinations, click here for the RGB color codes.
Now, try out the following example:
Copy and paste the above codes to your notepad and save as bgcolor.html.
The Output is as shown below:
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 text attribute of the body element, as shown below:
<body bgcolor=”blue” text=”white”>
You may use normal words for the color attribute or use hexadecimal notation.
Now, try the following example
Copy and paste the above codes to your notepad and save the file as txtcolor.html
The output is as shown below:
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 typeface 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 face=”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.
The output is show below: