Two special values ​​in CSS are used to control the inherit and initial methods of the cascade

There are two special values ​​that can be assigned to any property in CSS to control the cascade: inherit and initial. Let's look at these two special values.

Using the inherit keyword

Sometimes, we want to use inheritance instead of a cascading value. This is when you can use the inherit keyword. You can use it to override another value so that the element inherits the value of its parent element.

Suppose we want to add a light gray footer to our web page. There are some links in the footer, but we don't want them to be too prominent because the footer is not the focus of the web page. Therefore, you need to turn the links in the footer into dark gray (as shown in the figure below).

"Terms of use" link inherits grey text color

Usually we will add a font color to all links on a web page (if not, the user agent style will be used). This color will also be used for the "Terms of use" link in the footer. To make the links in the footer grey, you need to override the color value. Add the following code to your stylesheet.

a:link{ /* (next 3 lines) global web link color*/ 
  color: blue; 
} 
... 
.footer{ 
  color: #666; /* Set the footer text to gray*/ 
  background-color: #ccc; 
  padding: 15px 0; 
  text-align: center; 
  font-size: 14px; 
} 
.footer a{ 
  color: inherit; /* inherits text color from footer */ 
  text-decoration: underline; 
}

The third rule set overrides the blue link color and sets the cascade value of the footer links to inherit. Therefore, it inherits the color of the parent element.

Summarize

This is the end of this article about two special values ​​in CSS used to control the cascade, inherit and initial. For more relevant CSS special values ​​​​to control the cascade, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!