Lesson 5: Adding Colors in HTML

❮ Previous Lesson Next Lesson ❯

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 Color to the Background

You can specify the color of the page's background using the bgcolor attribute of the body element, as shown below:

<body bgcolor="color">

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. 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 example:

Example 5.1

<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
</head>
<body bgcolor="cyan">
The background color of this web page is cyan. 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.

The Output is as shown below:

The background color of this web page is cyan. 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".

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

Example 5.2

<!DOCTYPE html>
<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. The output is as shown below:

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.

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 syntax is 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.

Example 5.3

<!DOCTYPE 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" face="Arial"  size=2>You can manipulate font color , size and font type using
the font tags</font>.<font color="#aaaa00" size="2" face="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>

The output is show below:

Manipulation of Fonts

You can manipulate font color , size and font type using the font tags.It can be done fairly easily by anybody. Most important you must try it out yourself and dare to experiment with anything.

This part of the text will appear blue.

❮ Previous Lesson Next Lesson ❯