CSS Color Keywords
Here, we will discuss the following keywords:
transparent
currentcolor
Inherit
Transparent keyword
- A color can generally be made transparent by using the transparent keyword. Often it is used to for all intents and purposes make a transparent background color for an element.
- We basically have here kind of transparent background colors for the <div> element and transparent background images for the background images.
- HTML elements can be made kind of transparent using CSS's the particularly transparent keyword. This can essentially be used, for example, to set transparent background in really big way. The transparent keyword can for the most part be used wherever a color value specifically is accepted.
- The transparent keyword is equivalent to rgba(0,0,0,0), particularly contrary to popular belief. In addition to RGB color values, RGB color values specifically include a really alpha channel - which specifies the opacity for a pretty particular color, which mostly is fairly significant.
- In some cases, you do generally have to expressly set the foundation to straightforward in a major way. For instance, you should set a component to straightforward assuming its experience tone is presently misty shading.
Syntax
background-color: transparent;
Example
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* background-image: url("paper.gif"); (you can insert any img in it)*/
}
div.ex1 {
background-color: lavenderblush;
border: 4px solid black;
padding: 18px;
}
div.ex2 {
background-color: transparent;
border: 4px solid black;
padding: 18px;
}
</style>
</head>
<body>
<h2>The transparent Keyword in CSS</h2>
<div class="ex1">This has a lavenderblush background.</div>
<br>
<div class="ex2">Transparent background is shown here....</div>
</body>
</html>
The output of the above code:
Current color keyword
- CSS currentcolor is used to for the most part define the color while using the color property.
- You can easily use currentcolor keyword if you mostly want a particular color to for all intents and purposes appear at definitely multiple places.
- After setting the color property, you can quickly use currentcolor to set it for all very other places where the color should essentially be set in a subtle way.
- If you specifically want to change all the colors in the future, you have to generally make the changes in one place.
- Browsers supported-CSS currentcolor keyword is supported by the following listed browsers:
# Chrome
# Firefox
# Safari
# Opera
# Internet Explorer
Syntax
background-color: currentcolor ;
We will essentially see two examples for currentcolor. In the first example, we will use the currentcolor for box-shadow and in the second example we will use currentcolor for the text color on backgrounds.
Example 1
This example will show currentcolor for box-shadow.
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>
CSS currentcolor keyword
</title>
<style>
body {
color: rgb(233, 84, 84);
font-size: 1.2em;
}
div {
box-shadow: 0px 0px 80px currentcolor;
border: 11px solid;
width: 40%;
margin: auto;
padding: 22px;
}
</style>
</head>
<body>
<center>
<h1>Javatpoint</h1>
<div>
This is the interview questions Portal
</div>
</center>
</body>
</html>
The output of the above code:
Example 2
This example will show currentcolor for the text color on backgrounds.
Code is as follows:
<!DOCTYPE html>
<html>
<title>CSS currentcolor keyword</title>
<head>
<style>
body {
color: rgb(155, 67, 67);
}
div {
background: currentcolor;
width: 40%;
margin: auto;
padding: 5px 18px;
}
div > p {
color: white;
opacity: 0.5;
font-size: 1.5em;
}
</style>
</head>
<body>
<center>
<h1>Javatpoint</h1>
<div>
<p>This is the interview questions Portal</p>
</div>
</center>
</body>
</html>
The output of the above code:
Inherit keyword
- A property can specifically inherit its value from its parent element.
- Any CSS property, or any HTML element, can for all intents and purposes be modified with the inherit keyword.
Syntax
border: inherit ;
The below example actually shows how the border settings for the span element will be inherited from its parent element:
Example
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid palevioletred;
}
span {
border: inherit;
}
</style>
</head>
<body>
<h2>The inherit Keyword</h2>
<div>Similarly, the <span>span element's</span> border settings will be inherited from the parent element.</div>
<br>
<div style="border:2px dotted blueviolet;">In this , the border settings of the <span>span element's</span> child element will also be inherited from the parent element.</div>
</body>
</html>
The output of the above code:
