In this section, we will learn what the initial keyword is and how to use it in CSS.
What is initial in CSS?
In the CSS inheritance section, we mentioned that, by default, CSS properties have a default value set for them. This means if we don’t explicitly change the values of these properties, then this initial value will be used for the properties.
We also mentioned that some properties are capable of taking their parent values! For example, a property like `font-size` if we don’t set a value for it, it will look into the parent elements to see if they explicitly set a value for this property or not! And if they did, the child element will use the value of that property to set its own.
Now, for some reason, we might want to set the value of such type of properties to their initial value even though their parent elements have different values for the target properties. But now the question is, do we really know what the initial value of every property is? The answer is no! But fortunately, CSS has another value to solve the problem here.
Well, this is where the `initial` keyword comes in! Basically, whenever we want to reset the current value of a property to its initial value, we can simply pass the word `initial` as the value of the target property and when the browsers see this value, they know that the value of the target property must be set to its initial.
That’s how we can reset the value of a property.
CSS initial Keyword Syntax:
selector {
property: initial;
}
Example: using initial Keyword in CSS
See the Pen using initial Keyword in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
Here, the value of the `font-size` for the <body> element is changed and set to 60px. This property in inheritable! And that means by default, the entire children of the <body> element will try to inherit this value for the `font-size` property of themselves. So the <h3> and <p> element in this example should have the 60px font size!
But then, for the <p> element particularly, we’ve changed the value of the font-size property to its initial value using the `initial` word. That’s how the content of the <p> element didn’t change in size.
