CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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:

CSS Color Keywords

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:

CSS Color Keywords

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:

CSS Color Keywords

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:

CSS Color Keywords



ADVERTISEMENT
ADVERTISEMENT