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.
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
Share your thoughts in the comments
Please Login to comment...