CSS (foreground) color

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

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