CSS - color

The CSS color property sets the foreground color of an element (typically, the color of the text).

Possible Values

  • <color> − should be any valid color value.

    • keyword: Example = red

    • hexadecimal value: Example = #ff00ff

    • rgb value: Example = rgb(255,125,200)

  • currentcolor − The color property value is set to the element's color, with currentcolor treated as inherited when assigned to the color property.

Applies to

All elements and text. It also applies to ::first-letter and ::first-line.

Syntax

color: <color> | currentcolor;

CSS color - <color> Value

The following example demonstrates the red color h2 heading, yellow paragraph text, and pink text by using color property −

<html>
<head>
<style>
   h2 {
      color: red;
   }
   p {
      color: #ffff00;
   }
   div {
      color: rgb(224,37,197);
   }
</style>
</head>
<body>
   <h2>
      This text will have red color.
   </h2>
   <p>
      This text will have yellow color.
   </p>
   <div>
      This text will have pink color.
   </div>
</body>
</html>

CSS color - currentcolor Value

The following example demonstrates that .inherit-color class has its text color set to currentcolor, which means it inherits the color of its parent container (.color-text) −

<html>
<head>
<style>
   .color-text {
      color: green; 
   }
   .inherit-color {
      color: currentcolor; 
   }
</style>
</head>
<body>
   <div class="color-text">
      This text has the initial color set to green.
      <p class="inherit-color">This text inherits the color (green) from the parent container.</p>
   </div>
</body>
</html>
Advertisements