CSS Color Keywords
This page is here to tell you about some special words: transparent, currentcolor and inherit.
The transparent Keyword
The term transparent means making a color see-through. People often use it to make the background color of
something see-through.
Example
body {
background-image:
url("paper.gif");
}
div {
background-color: transparent;
}
Try it Yourself »
Note: The word transparent means the same as rgba(0,0,0,0). RGBA colors are like RGB
colors but with an extra part called alpha that tells you how see-through the color is. To learn more,
check out our CSS RGB and CSS Colors chapters.
The currentcolor Keyword
In HTML, currentcolor is like a box that holds the current color used for an element's color property.
This term is useful when you want to maintain a consistent color for a section of a website or an entire web
page.
Example
body {
color: purple;
}
div {
background-color:
currentcolor;
}
Try it Yourself »
Example
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
Try it Yourself »
The inherit Keyword
In HTML, when we say inherit it means that a property should use the same value as its parent element.
In CSS, you can use the inherit keyword with any HTML element and for any property.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/paper.jpeg");
}
div.ex1 {
background-color: lightgreen;
border: 2px solid black;
padding: 15px;
}
div.ex2 {
background-color: transparent;
border: 2px solid black;
padding: 15px;
}
</style>
</head>
<body>
<h2>The transparent Keyword</h2>
<div class="ex1">This div has a light green background.</div>
<br>
<div class="ex2">This div has a transparent background.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: blue;
border: 10px solid currentcolor;
padding: 15px;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>The currentcolor keyword refers to the current value of the color property of an element.</p>
<div> This div element has a blue text color and a blue border. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: purple;
}
div {
background-color: currentcolor;
padding: 15px;
}
div p {
color: white;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>This is some text in the body part...</p>
<div>
<p>This div's background color is set to the current color value of the body element.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
padding: 15px;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>This is some text in the body part...</p>
<div>
<p>This div's border color and shadow color is set to the current color value of the body element.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
}
span {
border: inherit;
}
</style>
</head>
<body>
<h2>The inherit Keyword</h2>
<div>Here, the <span>span element's</span> border settings will be inherited from the parent element. </div>
<br>
<div style="border:2px dotted blue;">In this case, the border settings of the <span>span element's</span> element will be taken from its parent element. </div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL