See the Pen How Borders Would Work if they Inherited by Default by SitePoint ( on CodePen. The following CodePen example demonstrates how this sort of thing would look using a CSS keyword value that I’ll discuss in the next section: Similarly, if children inherited the background-image property from their parents, the result would be messy. In fact, if all properties were inherited, the effect would be similar to having no inheritance at all and you would have to write a lot of CSS to override this behavior.Īs an example, if the border property was inheritable, setting a border on a single element would cause the same border to appear on all its child elements.
The same is true in CSS not every CSS property is inherited by default by child elements. In real life, not all attributes of parents are passed on to their children. This brings uniformity to the layout without the need to repeat the same properties on multiple elements. Here I’ve defined the font-family, font-size, and line-height properties on the body element but all these values are inherited by different elements nested inside body. See the Pen CSS Inheritance example by SitePoint ( on CodePen. Similarly, you can imagine what a nightmare it would be if you were forced to set the font-family or font-size on every child element of a container. This would be time consuming, error prone, and difficult to maintain. Imagine how much CSS you would have to write to set the color on all children of the body tag. How is CSS Inheritance Useful?ĬSS Inheritance greatly reduces the time and effort required to create a website. In this article, you will learn about different aspects of inheritance and how it affects the appearance of different elements. The mechanism through which the value of certain properties is passed on from parent elements to child elements is called inheritance. If you set the color on a container element to green, then unless some rule overrides that color value, the color of all the elements inside the container will be green.
Unless some other factor comes into play, it’s often the case that tall parents have tall children, and so on. It’s common to see inheritance in action in real life.
0 kommentar(er)
