Quick Reach
What is text color property?
The color property is used to set the text color in CSS. You can specify the color of each element’s text separately. For example color of headings, link, paragraphs, Divs, list items etc.
However, if no color is given, the default is taken from body selector.
How to use the CSS color property?
Following is the syntax of using the color property:
color:#003399;
OR
color: red;
OR
color: rgb(33,45,55)
The text 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, for the R part if it is set to 0 means no red and 255 would mean full red.
Example of using the text color property
In this example we will set the color of heading 1, heading 2, and paragraph with the color value in HEX, color name, and RGB value respectively. See the online demonstration 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 colr name (white)</h2>
<p>Paragraph with RGB value</p>
</body>
</html>
|
You can see, by using the color CSS property, the color of the text of three different HTML elements are set along with the background colors.
Further Reading: CSS text
Leave A Comment?