w3resource logo


CSS tutorials

CSS (foreground) color

Secondary Nav

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.



Join our Question Answer community to learn and share your programming knowledge.

Help the community:

Python: Fizzbuzz

C++: Decimal to binary conversion

JavaScript: Need Help in JavaScript

Python: Help me with this program