CSS color Property

The CSS color property is used to define color for the text. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2{color: chocolate;}
      p{color: blue;}
   </style>
</head>
<body>
   
   <h2>The color Property</h2>
   <p>This is an example of color property in CSS.</p>

</body>
</html>

Output

The color Property

This is an example of color property in CSS.

Note - Defining perfect color combination to texts available in your web application provides good user experience.

CSS color Property Syntax

The syntax of color property in CSS, is:

color: x;

The value of x should be any of the following:

color - used to define custom color to the text
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS color Property Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{color: red;}
      .b{color: rgb(255, 0, 0);}
      .c{color: rgba(255, 0, 0, 1);}
      .d{color: rgba(255, 0, 0, .3);}
      .e{color: hsl(0, 100%, 50%);}
      .f{color: hsla(0, 100%, 50%, 1);}
      .g{color: hsla(0, 100%, 50%, .3);}
      .h{color: #ff0000;}
   </style>
</head>
<body>
   
   <h2 class="a">color: red</h2>
   <h2 class="b">color: rgb(255, 0, 0)</h2>
   <h2 class="c">color: rgba(255, 0, 0, 1)</h2>
   <h2 class="d">color: rgba(255, 0, 0, .3)</h2>
   <h2 class="e">color: hsl(0, 100%, 50%)</h2>
   <h2 class="f">color: hsla(0, 100%, 50%, 1)</h2>
   <h2 class="g">color: hsla(0, 100%, 50%, .3)</h2>
   <h2 class="h">color: #ff0000</h2>

</body>
</html>

Output

color: red

color: rgb(255, 0, 0)

color: rgba(255, 0, 0, 1)

color: rgba(255, 0, 0, .3)

color: hsl(0, 100%, 50%)

color: hsla(0, 100%, 50%, 1)

color: hsla(0, 100%, 50%, .3)

color: #ff0000

Note - The rgb() Function is used to apply the color based on the red, green and blue color intensity parameters.

Note - The rgba() Function is used to apply the color based on the red, green, blue, and alpha (opacity) parameters.

Note - The hsl() Function is used to apply the color based on hue, saturation, and lightness parameters.

Note The hsla() Function is used to apply the color based on hue, saturation, lightness, and alpha (opacity) parameters.

CSS Online Test

« Previous Tutorial Next Tutorial »