CSS Color Keywords

Last Updated : 09 Jan, 2024

CSS Color Keywords provide some special color keywords with their specific meanings. There are 3 different possible approaches through which the Color can be defined, i.e., the transparent, currentcolor, and inherit keywords.

Table of Content

Transparent Keyword

To make the color as Transparent, the Transparent Keyword can be used, which makes the background color as transparent for an element. The transparent keyword is equivalent to rgba(0,0,0,0).

Syntax

element {
  background-color: transparent;
}

Example: The example illustrates the CSS Color Keywords transparent.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport"            content="width=device-width,                     initial-scale=1.0">     <style>         div {             background-color: transparent;             border: 2px solid black;             height: 50px;         }          body {             background-color: rgb(165, 220, 165);         }          p {             background-color: rgb(238, 238, 249);             height: 50px;         }     </style> </head>  <body>     <h1>GeeksforGeeks</h1>     <div>         The element having         transparent color keyword     </div>     <p>         The element have         background-color     </p> </body>  </html>

Output:

Currentcolor Keyword

The currentcolor defines the value of the color property of the element that allows you to use the current text color for other properties. If the specific used color needs to be consistent for the entire web page or the element, then this keyword will be beneficial to use.

Syntax

element {
  color: crimson;
  border: 2px solid currentcolor;
}

Example: The example illustrates the CSS Color Keywords currentcolor.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport"            content="width=device-width,                     initial-scale=1.0">     <style>         div {             background-color: rgb(165, 220, 165);             border: 2px solid black;             height: 50px;         }          p {             color: rgb(211, 101, 158);             border: 5px solid currentColor;             height: 50px;         }     </style> </head>  <body>     <h1>GeeksforGeeks</h1>     <div>         The element having         currentcolor color keyword     </div>     <p>         The element have         background-color     </p> </body>  </html>

Output:

Inherit Keyword

To inherit the value of the property from its parent element, the inherit keyword will be beneficial to use. This property can be used either with CSS property or the HTML element.

Syntax

element {
  border: inherit;
}

Example: The example illustrates the CSS Color Keywords transparent.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport"            content="width=device-width,                     initial-scale=1.0">     <title>HTML Color Keyword</title>     <style>         div {             border: 2px solid rgb(165, 220, 165);         }          p {             border: inherit;         }     </style> </head>  <body>     <h1>GeeksforGeeks</h1>     <div>         The element having         inherit color keyword         <p>             The element have             background-color         </p>     </div> </body>  </html>

Output

CSS Colors

shivanigupta18rk

Improve

Article Tags :

CSS Color Keywords

Transparent Keyword

Syntax

Currentcolor Keyword

Syntax

Inherit Keyword

Syntax

Similar Reads