Difference between revert and unset keyword in CSS
Last Updated :
27 Feb, 2020
Both of them are keywords in CSS. Both of them act similarly in web development but having differed for some properties for some elements.
Revert: The revert keyword is an inbuilt keyword in CSS which has been used to revert the cascading style to its parent element. If any similar elements hold the same cascading style, but one child holds the revert keyword then the cascading style will be removed and will inherit the cascading from the parent element.
Unset: The unset keyword is an inbuilt keyword in CSS which has been used to unset the cascading style to its parent element. It behaves like the inherit keyword in the first case, and like the initial keyword in the second case.
Below example illustrate the difference between revert and unset keywords:
Note: The coding difference only can be visible in Mozilla Firefox and Apple Safari.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS revert keyword</title>
<style>
/* Color for h1 element */
h1 {
color: green;
}
/* Performing revert for child */
b {
font-weight: normal;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
<b style="font-weight: unset;">
I'm assign in unset
</b>
<br>
<b style="font-weight: revert;">
I'm assign in revert
</b>
</div>
</body>
</html>
|
Output:
Differences between revert and unset keyword in CSS:
| Revert |
Unset |
| This keyword will revert the cascading back to the parents cascading. |
This keyword will unset the cascading style. |
| This keyword will revert the cascading back if the element contains h3 and any other cascading style globally it will follow that. |
This keyword will unset the cascading style, if the element contains h3 and any other cascading style globally it will follow only h3 effect. |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...