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:

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 »


Liked this post? Share it!