In This Tutorial
The Font color property
The color attribute of HTML font sets the color of the text in the web documents. You can specify a color by the following ways.
Font color can be set by using:
- Hexadecimal value: This value is given by using a hash sign (#) and up to 6 HEX values (0-F).
- Color name: Giving a color name like red, green, yellow etc. Generally this is not the preferred method.
- RGB: RGB stands for Red, Green, and Blue. It defines the values of red, green and blue at the range of 0-255 for each. For example, in the R part if its value is set to 0 would mean no red while 255 would mean the full red.
You can use the <font> tag to specify color for text in the headings, paragraphs or div etc. However, the recommended way is to use the CSS to set the color of the text. Following example shows using the font color attribute in the font tag. You can also see, setting the font color of different text in HTML elements by using the CSS.
Specify color in <font> tag example
The example sets font color in the <font> tag. For that example, we have created a heading 1 (h1 tag), a heading 2 (h2 tag) and a paragraph (the <p> tag). The font is used as follows:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Font </title>
</head>
<body>
<h1><font size=“6” color=“red”>This is heading 1 </font></h1>
<h2><font size=“4” color=“blue”>This is Heading 2 </font></h2>
<p> <font size=“4” color=“#003399”>This is Paragraph </font></p>
</body>
</html>
|
Font color with CSS
In this example, we will set the color for heading 1, heading 2, and the paragraph with color value in HEX, color name and RGB value respectively. See online demonstration of this example by clicking link below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS text*/
h1
{
background-color: #F0F0F0;
color: #355681;
}
h2
{
background-color: #355681;
color: white;
}
p
{
background-color: #F0F0F0;
color: rgb(000,125,255);
}
</style>
</head>
<body>
<h1>heading 1 with HEX value</h1>
<h2>Heading 2 with color name (white)</h2>
<p>Paragraph with RGB value</p>
</body>
</html>
|
You see, we have defined the CSS in the head section for each element. In the CSS part, we set the color by using the color property of the CSS.
Also see HTML Font | HTML table | CSS font | HTML form
Leave A Comment?