CSS Colors

There are many commands in CSS to set the colors of the text, backgroud etc. to make the web page look like you want it to. The value can be set either as a rgb value, hexadecimal number or a color name.

Set Text Color

The color property can set the color of your text. The value of color property can be set either as a rgb value, hexadecimal number or a color name. Example:

<html>
<head>
<style type="text/css">
h3.rgb {color: rgb(255,255,0)}
div.hex {color: #dda0dd}
p.name {color: red}
</style>
</head>

<body>
<h3 class="rgb">The color is specified as an rgb value</h3>
<div class="hex">The color is specified as a hexadecimal value</div>
<p class="name">The color name is specified</p>
</body>
</html>

Output:

The color is specified as an rgb value

The color is specified as a hexadecimal value

The color name is specified

Highlight Text

To highlight a text, i.e. to set the background color of a text, background-color property is used.
Example:

<html>
<head>
<style type="text/css">
div.rgb {background-color: rgb(255,255,0)}
span.hex {background-color: #dda0dd}
p.name {background-color: green}
</style>
</head>

<body>
<div class="rgb">The highlighted color of this text is mentioned in grb
</div>
<span class="hex">The highlighted color of this text is mentioned in hex
</span>
<p class="name">The color of this highlighted text is mentioned</p>
</body>
</html>

Output:

The highlighted color of this text is mentioned in grb

The highlighted color of this text is mentioned in hex

The color of this highlighted text is mentioned

Set Background Color

You can set the background color of any element by using the property, background-color. If you need to set the background color of the web page, use background-color property in the element.
Example:

<html>
<head>
<style type="text/css">
body {background-color: yellow}
p.green {background-color: #00ff00}
div.trans {background-color: transparent}
</style>
</head>

<body>
The background color is set to yellow.
<p class="green">This paragraph is green</p>
<div class="trans">This division is transparent</div>
</body>
</html>

The example above must be quite clear. One thing new must be the color, transparent. This is the default background color.
Output:

The background color is set to yellow.

This paragraph is green

This division is transparent

CSS Tutorial

CSS Colors

Set Text Color

The color is specified as an rgb value

Highlight Text

Set Background Color

'w3reference : Learn by examples ... Advanced to beginner's tutorials ...'