Understanding CSS Inheritance

With sprucing up some of my more recent projects, I’ve decided to do a little more with CSS. To help better understand inheritance, I thought it would be a good idea to write a blog about it.

Inherit will take the value from the parent. The picture shows a basic way of how it works with the birds. The parent is red and its child will follow what the parent does, though the bird isn't red itself, it will still inherit certain traits.

From the code displayed, I have the style of div have a font size of 5rem. The font within the div should all be the same size because of it. Even though we have the p tag labeled within the html, the p tag inherits whatever is in the div because we haven’t set aside a personal CSS style for it. This is a more basic example. Not all things however are inherited, sometimes you must be more specific.

Notice how we have not inherited the border, the border is going around both of them, yes. But this is what happens when we add a p tag within the style sheet and have it inherit what the div is doing.

We’ve successfully inherited from the div tag, and now the p tag has it’s own border thanks to inheritance. Goes to show all things are not inherited by default, but certain things must be specified to be inherited. Basically everything can be inherited from my personal knowledge. But an important note, inheritance will always go to the parent container. A better way of showing what I mean will be through a small example!

This would be the end result. We added a css style with the tag of p.testing and then added the class name of testing within our HTML. Notice how p.testing is still inheriting from the div tag rather than its own tag of just p. This is how inheritance works, in CSS the child container will always inherit from the parent container, in this case the parent container being the div tag. It may be a little confusing but it will make more sense the more you start using inherit.

This blog doesn’t seem too tidy, because its not. But I’ve tried my hardest to explain my interpretation of inheritance while solidifying on what I know and trying to help others who don’t have a full grasp of it. Thank you for taking time out of your busy day to read this 2–3 min blog that i’ve constructed. I’ll see ya when ya older! Keep on coding.