“Your initial approach to a person can determine your feelings toward them.” Dorothy Uhnak
Sample:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
div{
color:red;
}
.p-override{
color:initial;
}
</style>
</head>
<body>
<div>
<h1> This Header color is inherited from its parent</h1>
<p class = "p-override">The color of this paragraph is set to initial</p>
<p> This paragraph inherits its color value from its parent</p>
</div>
</body>
</html>As we mentioned in inheritance section, by default browsers have their initial CSS style and apply that to CSS properties of any element in a page. But of course we can simply apply over own CSS styles to any element and override the default style.
Sometimes however, we have applied our own value to a CSS property but then want that property to have its initial value! This is where the CSS initial keyword comes in.
The initial keyword is a special keyword that we use when we want a property of an element to have its very default value.
All we have to do is to put this keyword as the value of the target property then it will have the initial value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
div{
text-transform: uppercase;
}
.p-override{
text-transform: initial;
}
</style>
</head>
<body>
<div>
<h1> The text of this header is all uppercased</h1>
<p class = "p-override">this text is transformed to initial</p>
<p>The text of this paragraph is all uppercased</p>
</div>
</body>
</html>