CSS Color Keywords
- Previous Page CSS Colors
- Next Page CSS Gradients
This chapter will explain transparent
,currentcolor
and inherit
keyword.
transparent keyword
transparent
The keyword is used to make the color transparent. It is usually used to set a transparent background color for an element.
Example
In this case, the background color of the <div> element will be completely transparent, and the background image will be displayed:
body { background-image: url("paper.gif"); } div { background-color: transparent; }
Note:transparent
The keyword is equivalent to rgba(0,0,0,0)
.RGBA color values are an extension of RGB color values, with an alpha channel - it specifies the opacity of the color. More information can be found in our CSS RGB Chapter and CSS Colors Chapter.
currentcolor keyword
currentcolor
The keyword is similar to a variable, which saves the current value of the element's color attribute.
This keyword is very useful if you want a specific color to remain consistent in an element or on a page.
Example
In this example, the border color of the <div> element will be blue because the text color of the <div> element is blue:
div { color: blue; border: 10px solid currentcolor; }
Example
In this example, the background color of the <div> element is set to the current color value of the body element:
body { color: purple; } div { background-color: currentcolor; }
Example
In this example, the border color and shadow color of <div> are set to the current color value of the body element:
body { color: green; } div { box-shadow: 0px 0px 15px currentcolor; border: 5px solid currentcolor; }
inherit Keyword
inherit
The keyword specifies that the attribute should inherit its value from its parent element.
inherit
Keywords can be used for any CSS property and can be used for any HTML element.
Example
In this example, the border setting of <span> will be inherited from the parent element:
div { border: 2px solid red; } span { border: inherit; }
- Previous Page CSS Colors
- Next Page CSS Gradients