CSS Color Property

In this chapter you will learn:
CSS color property
Examples of this property
CSS color property is used to set the color of the text of HTML tags or elements like p, h1, body etc. It is a common property which is used by many tags or elements. You can give an attractive look to your web pages with the help of this property.
Syntax:
Selector
{
color: value;
}
Note:
You can give the color-value with the name of the color, a combination of RGB and hexadecimal form. Examples of each value are given below-
Examples of this property:-
Example 1. Color property for paragraph
<html>
<head>
<style type="text/css">
#p1{
color:blue;/* value of color is in the form of name of the color */
}
#p2{
color:rgb(0,0,255);/* value of color is in the form of the combination of rgb */
}
#p3{
color:#0000ff; /* value of the color is in the form of hexadecimal */
}
</style>
</head>
<body>
<p id="p1">This is the example of color property.</p>
<p id="p2">This is the example of color property.</p>
<p id="p3">This is the example of color property.</p>
</body>
</html>

Guide:-
In the given program the value of the color property of paragraph is in the different form but the output is same because all values are same(blue).
Output:-
example of color property of paragraph
Example 2. Color property for heading(h1)

<html>
<head>
<style type="text/css">
#a{
color:blue;/* value of color is in the form of name of the color */
}
#b{
color:rgb(0,0,255);/* value of color is in the form of the combination of rgb */
}
#c{
color:#0000ff; /* value of the form is in the form of hexadecimal */
}
</style>
</head>
<body>
<h1 id="a">This is the example of color property.</h1>
<h1 id="b">This is the example of color property. </h1>
<h1 id="c">This is the example of color property.</h1>
</body>
</html>

Guide:-
In the given program the value of the color property of heading (h1) is in the different form but the output is same because all values are same(blue).
Output:-
example of color property of heading(h1)

Some important notes-

You can use different color values of color property with the combination of RGB. If the value of any color is 0 (zero) then it means that it has no color but if the value of color is 255 then it means that the color is available in the combination. Such as if you write RGB(0,0,255) then it means that red and green have no color but blue has color so the output will blue. You can write many color codes like-
rgb(0,0,0)
rgb(255,255,255)
rgb(0,255,0)
rgb(0,0,255)
rgb(0,255,255)
rgb(255,255,0)
rgb(255,0,255)
You can also write the color code in hexadecimal form like-
#0000ff
#00ff00
#ff00ff
#000000
#ffffff
#ffff00
#00ffff

Summary

In this chapter, you have learned about the color property of CSS and some examples with screenshot of output so now it is very easy to use this property. Click on Next button to continue-

More Articles

 

Share your thought