Quick Reach
The font color property of CSS
The CSS font color property is used to set the text color. You can specify the font color of each element’s text separately.
For example, if you need to set the color of heading in red and paragraph in blue then you can use the font color property in each element separately.
An example of font color property
Following is the syntax to use the font color property which is followed by an example to use it.
Syntax of setting font color in CSS
This is how you can set the color of text by color property:
color:#003399;
OR
color: red;
OR
color: rgb(33,45,55)
Ways to set font color
These are the ways to set the font color values:
- By Hexadecimal value: This value is given by using a hash sign (#) and up to 6 HEX values (0-F) in font color CSS property.
- Using the color name: By using the color name like black, green, blue etc. This is not the recommended way.
- Using RGB value: RGB stands for Red, Green, and Blue. It defines the values of red, green and blue at the range of 0-255 for each.
CSS font color property example
This example uses all three ways to set the font color of different elements. The h1 tag is given the HEX value. In the h2, we used a color name for demonstration purpose. While a paragraph is given an RGB value. See the example and code by clicking the link or image below:
Experience this example online
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
|
<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>
|
As you can see, the <h1> color is set by HEX color code in font color. While h2 by color name and paragraph by RGB value.
Further Reading: CSS font
Leave A Comment?