w3resource

CSS (foreground) color

The 'color' property

'color' properties allow to set colors for the text content of an element. The following table shows the necessary detail of the 'color ' property.

value color, inherit
initial depends on the user agent
applies to all elements
inherited yes
percentages N/A
media visual
computed value as specified

We will see a very common usage of color property now:

Here is the css file (say color.css):

body { color: navy } li { color: maroon }

This stylesheet states that all the elements under body shall be of navy color, but if it am list item (li), then it shall be maroon.

Here is the html file (say color.htm) to which the stylesheet above is applied:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>example of external CSS - foreground color </title>
<link href="color.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>We are learning color property of CSS</p>
<ul>
<li>we will learn color property of CSS in this section</li>
</ul>
</body>
</html>

Here is how it will look:

Before go in more detail about css color property,in the next page we will see different ways of specifying color.

Previous: Introduction to CSS media and media types
Next: CSS color units



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/css/color/introduction.php