CSS Color Keywords

CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
Post Reply
Guest

CSS Color Keywords

Post by Guest »

CSS Color Keywords


This page will explain the transparent, currentcolor,
and
inherit keywords.

The transparent Keyword
The transparent keyword is used to make a
color transparent. This is often used to make a transparent background color for
an element.

Example
Here, the background color of the <div> element will be fully
transparent, and the background image will show through:

body {  background-image: url("paper.gif");}div {  
background-color: transparent;}
Try it Yourself »


Note: The transparent
keyword is equivalent to rgba(0,0,0,0). RGBA color values are an extension of
RGB color values with an alpha channel - which specifies the opacity for a
color. Read more in our CSS RGB chapter and in
our CSS Colors chapter.


The currentcolor Keyword
The currentcolor keyword is like a variable
that holds the current value of the color property of an element.
This keyword can be useful if you want a specific color to be consistent in an
element or 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;}
Try it Yourself »


Example
In this example the <div>'s background color is set to the current color
value of the body element:

body {  color: purple;}div {  background-color:
currentcolor;}
Try it Yourself »


Example
In this example the <div>'s border color and shadow color is set to
the current color value of the body element:

body { color: green;}div {   box-shadow: 0px 0px
15px currentcolor;  border: 5px solid currentcolor;}
Try it Yourself »


The inherit Keyword
The inherit keyword specifies that a
property should inherit its value from its parent element.
The inherit keyword can be used for any CSS
property, and on any HTML element.

Example
In this example the <span>'s border settings will be inherited from
the parent element: 

div {  border: 2px solid red;}span {  border:
inherit;}
Try it Yourself »














+1

Reference: https://www.w3schools.com/css/css_colors_keywords.asp
Post Reply