CSS color Property
CSS color property is used for setting the foreground color value of the text of an element and the text decorations and also sets the current color value. The current color value can be used as an indirect value on the other properties and is the default value for other properties like border-color. This property is generally specified as a single color value.
Syntax for color Property
Following is the syntax for the color property.
color: color|initial|inherit;
Example: CSS color Property
Here in the example below, we are using the color property with different text colors, styles, and different values. In this case, we have given the color of the text using the hsla() value of this property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-top property in CSS</title>
<style type="text/css">
div {
border-style: dashed;
border-color: blue;
background-color: pink;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
color: hsla(0, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<div>This box has a border on the top side.</div>
</body>
</html>
Output:
Example 2: CSS color Property
Here in the example below, we are using the color property with different text colours, styles and their different values. In this case, we have given the color of the text using the rgb() value of this property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-top property in CSS</title>
<style type="text/css">
div {
border-style: dashed;
border-color: blue;
background-color: pink;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div>Study Tonight is the best place to learn digital.</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
3 |
3 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the color property in CSS varies from one browser to another. This property is applicable to all elements. It is also applicable to the ::first-letter and the ::first-line. It is an inherited property. The computed value for this property is rgba() if the value is translucent but if it is not translucent, then it is rgb().
