April 3rd, 2019 
Nilesh Chaurasia CSS Color Property
CSS color property is used to change the color of an HTML element. You can specify the color of text by name, HEX Code and RGB Values.
Example 1 – Color Property Example to Change the Text Color of p HTML element
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: blue;
}
</style>
</head>
<body>
<p>Lorem ipsum lvinar mattis nunc sed blan dit libero. Turpis massa sed eleme. Lentesque id nibh tortor id aliq ueted risus pretium quam.</p>
</body>
</html>
In the above code, we specify the text color of an HTML Element.
Here, we apply the color by the name of color.
You also specify different colors to different HTML Elements.
Example 2 – Another example of Color Property for p, body and h1 HTML tag
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: blue;
}
body
{
color: green;
}
h1
{
color: red;
}
</style>
</head>
<body>
<h1>This is a main heading.</h1>
<h2>This is a sub heading.</h2>
<p>Lorem ipsum lvinar mattis nunc sed blan dit libero. Turpis massa sed eleme. Lentesque id nibh tortor id aliq ueted risus pretium quam.</p>
</body>
</html>
In the above code, we specify the text color of different HTML Element.
Here, we apply the different colors to different HTML Elements.
We did not define the color for <h2> element so it will change color according to defining the color body. So all the undefined HTML Elements will change their color accordingly to body defined color.
You can specify Font or Text Color by 3 different ways in CSS
- name – you can define or set color by name, such as”red”
- RGB – you can define or set color by RGB value, such as “rgb(0,120,0)”
- Hex – you can define or set color by the Hex value, such as “#ff336e ”
Note: You have to specify RGB Values with RGB Function, like rgb(211,241,93); and HEX Code with # symbol, like #b3efcc. Without using this syntax than color functions will not work as expected.
Specify the CSS Text Color using HEX Code Value
Example 3 – Another example of CSS Color Specification using HEX Code Format.
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: #f797b3;
}
body
{
color: #6dafc7;
}
h1
{
color: #f18e5d;
}
</style>
</head>
<body>
<h1>This is a main heading.</h1>
<h2>This is a sub heading.</h2>
<p>Lorem ipsum lvinar mattis nunc sed blan dit libero. Turpis massa sed eleme. Lentesque id nibh tortor id aliq ueted risus pretium quam.</p>
</body>
</html>
In the above code, we define the text color of different HTML Element using HEX Code.
Here, we apply the different colors to different HTML Elements.
Caution:The benefits of the HEX Code and RGB Value are that you can define a customized color to HTML Elements. The color names are limited if you want to define more detailed color than you can use HEX Code Color Or RGB Values.
Color using RGB Values
Example 4 – Another example of Color using RGB Values.
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: rgb(241,210,93);
}
body
{
color: rgb(211,241,93);
}
h1
{
color: rgb(179,239,204);
}
</style>
</head>
<body>
<h1>This is a main heading.</h1>
<h2>This is a sub heading.</h2>
<p>Lorem ipsum lvinar mattis nunc eleme. Lent esq ueus pre tium qua midnibh tortor id aliq ueted ris.</p>
</body>
</html>
In the above code, we define the text color of different HTML Element using RGB Values.
Posted in 
Tags: 
Great write up. I’m going to share this site with my parents.