CSS Color Keywords
As we know that colors in CSS can be defined in values like RGB, HSL, HEX and simply mentioning the color name.
Here we will discuss the keywords we can use to define colors. They are transparent, currentcolor, and inherit keywords.
The transparent Keyword
The transparent keyword is often used to make the color of the element transparent.
Let's have a look at an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
.a1 {
background-color: yellow;
}
.a2 {
background-color: transparent;
}
</style>
</head>
<body>
<div class="a1">This will have a colored background.</div>
<br>
<div class="a2">This Will have a transparent background.</div>
</body>
</html>
Output:
The currentcolor Keyword
This keyword behaves like a variable that holds the current color value of the element. It is especially useful when a color is required to be consistent throughout an element or a page.
We can specify the color of an element and set that as the current color for other attributes of that element.
Let's have a look at an example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: blue;
border: 3px dotted currentcolor; /* The border will also have blue color */
}
</style>
</head>
<body>
<h3>Understanding currentcolor keyword.</h3>
<div>This will result in text and border color being blue</div>
</body>
</html>
Output:
Understanding currentcolor keyword.
Or we can set the color of one element as currentcolor in another element.
Here's an example:
body {
color: green;
}
div {
outline: 1px solid currentcolor;
}
The inherit Keyword
This keyword specifies that a property should inherit its value from its parent element and can be used for any CSS property, and on any HTML element.
Here's an example:
/* Parent Element */
div {
border: 2px double red;
}
/* Child Element */
h1 {
border: inherit;
}