Learning CSS with Less - Inherit and Initial Values
Learning CSS with Less - Inherit and Initial Values
Somewhere between technicality and non-technicality - a bridge of communication between technical knowledge and creativity is created. And there we meet our developers who want to give voice to the code and knowledge gathered during all the years of hard work, to share them with anyone who is eager to learn new things!
For this exact reason, the series of "Learning CSS with Less" created by Andrei Moraru, a great #remotewarrior from our community, delighted us from the very beginning.
Today, a new part of this course is here for you.
- Topics of discussion
- The inherit value
- The initial value
1. Topics of discussion
In this tutorial, we are going to discuss the inherit and initial values for CSS properties. So, let's have some fun.
2. The inherit value
So far we've discussed quite a few CSS properties. And if you have opened the element inspector (by pressing F12) in your browser and tried changing some values, you may have encountered the 2 options in the title. Let's start by talking about the inherit value for CSS properties.
This value can be used on just about any CSS property you can think of. Its meaning is quite simple. When using this value on a CSS property, it translates into it using the same value as the parent element uses.
For example, say you have a parent element with a max-height of 100px, and inside said element you create a child. If you use the max-height: inherit instruction on the child element, what that means is that the child element will also have a max-height of 100px.
And yeah...that's the gist of the inherit value for CSS properties. I don't personally use it that much, but I figured you should know about it in order to understand what it means should you encounter it.
3. The initial value
The initial value for CSS properties also has a special meaning. It basically sets the value of a property to the default value. For example, if you were to use something like position: initial, the meaning behind it is that it would make the element behave as if its position was set to static, which is the default value for the position CSS property. Nothing more special behind this.
And yeah, that about covers it for this tutorial. In the next one, we are going to discuss lists. See you then.