Flash cards
Review the key moves
What is the main idea behind CSS Color Keywords?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-image: url("paper.gif");Put the learning moves in the order that makes the concept easiest to apply.
CSS has some special predefined color keywords that can be used with properties like color , background-color and border-color .
The special keywords are
- transparent
- currentcolor
- inherit
The transparent Keyword
The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element.
Example
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}Live preview
Note
The transparent keyword is equivalent to rgba(0,0,0,0). RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. Read more in our CSS RGB chapter and in our CSS Colors chapter.
The currentcolor Keyword
The currentcolor keyword is like a variable that holds the current value of the color property of an element.
This keyword can be useful if you want a specific color to be consistent in an element or a page.
Example
div {
color: blue;
border: 10px solid currentcolor;
}Live preview
Example
body {
color: purple;
}
div {
background-color: currentcolor;
}Live preview
Example
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}Live preview
The inherit Keyword
The inherit keyword specifies that a property should inherit its value from its parent element.
The inherit keyword can be used for any CSS property, and on any HTML element.
Example
div {
border: 2px solid red;
}
span {
border: inherit;
}Live preview