Using Initial Keyword in CSS

The initial keyword is a real mystery for a lot of developers. It is something like a reset for CSS properties.

I’m that guy who use the property’s default value – which is mostly auto, 0, normal or something similar – if he wants to reset a property. I don’t know the reason but for me, the initial value was a blind spot. Thus I made some research and I found it is an interesting piece of CSS which can cause some misunderstanding.

Need a WordPress website? Or you prefer the more performant headless and static solutions? We can help!

So what initial keyword means?

Using the initial keyword you can set every property to the CSS specification’s initial value or if there isn’t any to the browser’s default value. It has to be noted that the browser defaults can be varied. So if I want to set a property to the initialized value I just need to set initial as a value:

.element { 
    color: initial; 
}

In this case, the element’s color will be black because this property has the black default value in the most browsers.

.element { 
    width: initial;
    padding: initial;
}

With this line, you can set the initial value for the width (which is auto) and padding (which is zero) property.

You need also know that this value doesn’t care about your element. If you use a div and want to reset it to the default display value you get display: inline; (because this is the initial value) however, your div by default is display: block;. In this case that display: block; line is came from your browser’s default – like the font-size in your headings.

As you read in the introduction you will not suffer any disadvantage if you don’t know the initial. This is because you can do most of the things more than one way in CSS.

For me was a surprise that a lot of people mixes the initial and inherit. We can see that the name of this two keyword is spoken for themselves. The initial refers to the initialized value while the inherit refers to the parent element’s value. So if you use the initial you bypassing the cascading and get the default (by the CSS spec) value.

What are the use cases?

This is tricky because there aren’t any complex use case. You will know if you need this in your code; for me this is mostly some overwriting situation.

Summary

This CSS feature is so small that it is intermediate. This is something you have to know to understand better your stylesheets.