What are transparent, currentcolor, and inherit keywords in CSS?

Overview

The transparent keyword in CSS is used to represent a fully transparent color. With the help of this, we can set the items as transparent to see the background element.

Syntax

background-color: transparent;

Code

Explanation

HTML

  • Lines 1–10: We make two boxes using HTML. One is box 1, and the second is box 2.

CSS

  • Lines 1–4: We set the background image.

  • Lines 5–11: We define the properties and styling for box 1.

  • Lines 12–15: We define the style for box 2 as transparent.

The currentcolor keyword

Using the currentcolor keyword, we can use the current color without even writing the actual value of the color. This basically means that we can use one color in multiple places without writing the color repeatedly.

Syntax

background-color: currentcolor;

Code

Explanation

HTML

  • Line 3: Here, we write the statement.

  • Lines 5–7: Here, we make a div and write some content.

CSS

  • Lines 1–6: Here, we define the style and properties of div. We set the border size, padding, and current color.

The inherit keyword

The inherit keyword in CSS is used to inherit the property values from its parent element. We can use the inherit keyword for any HTML element or CSS property.

Syntax

border: inherit ;

Code

Explanation

HTML

  • Line 3: We make a div, write some content, and use the span element.

  • Line 6: We make a div, write some content, and use the span element.

CSS

  • Lines 1–4: We set up the border color for the div.

  • Line 5–8: We set the property to inherit for the span element.

Free Resources