loading...

CSS Inheritance

ziizium profile image Habdul Hazeez Updated on ・3 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Inheritance in CSS sort of work the same way as an inheritance in humans, in the sense that, a child can inherit some of his parents attributes but not all.

Now, the question is: What can be inherited in CSS? Am glad you asked.

The answer is CSS Properties. And just a quick reminder that CSS Properties are the likes of font-size, color, background-color e.t.c

These properties are further classified into two:

  • Inherited Properties
  • Non-inherited Properties

INHERITED PROPERTIES

From the Mozilla Developer Network:

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value*.

This translates to: If you have a parent and child element, and there is an inherited property specified in the CSS rule targeting the parent if this value is not changed in the CSS rule targeting the child element, the child element will make use of the value(s) specified in the parent CSS rule.

Let's take some examples.

As usual, to follow along create your HTML and CSS files and don't forget to save and refresh your browser to see the changes.

Given the code snippet below:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed aliqua.</p>
</div>
div {
  font-size: 3em;
}

From the code above, it's evident that the paragraph does not have a font-size property. But, when you view it in your browser, the paragraph has a font-size of 3em and the browser says "Inherited from div" which makes the p the child of the div element:

Inherited property in CSS Firefox 70 Developer Tools

And if you switch over to the Computed tab, you will realize the paragraph has a computed font-size of 48px which means it's actually using the div element font-size property:

The Computed tab in Firefox 70 Developer Tools

Let's take another example, update your CSS with the following:

div {
  color: green;
  font-weight: bold;
  font-size: 50px;
}

Save your file and view in your browser, you will realize that the paragraph is making use of all the declarations given to the div element.

Inherited Properties in Firefox 70 Developer Tools

NON-INHERITED PROPERTIES

As the name implies, these are properties that cannot be inherited. But Mozilla Developer Network has more:

When no value for a non-inherited property has been specified on an element, the element gets the initial value of that property.

This translates to: If you assign a value to a non-inherited property in the CSS rule of a parent element, the child element won't make use of this value rather it will use the initial value* of this non-inherited property.

Let's take some examples. Update your CSS to match the following code:

div {
  border: 5px solid gold;
}

Save your file and view in the browser, you will observe that the paragraph p did not inherit its parent border:

Non-Inherited properties in Firefox 70 Developer tools

Now, you might be thinking: What if I need the paragraph to use its parent border? There are two ways I can think of right now:

  1. Adding a class attribute to the paragraph in HTML, and explicitly adding the border with CSS.
  2. We allow inheritance to take place.

By now, I am pretty sure you are accustomed to option 1, but option 2? Maybe, Maybe not.

We can allow inheritance to take place by using the inherit keyword. The inherit keyword allows authors (you and me) to explicitly specify inheritance, it works on both inherited and non-inherited properties.

Now, add the following snippet to your CSS:

p {
  border: inherit;
}

Save the file and refresh your browser. The paragraph will gladly use its parent border.

Making Inheritance work in Firefox using the inherit keyword

The list of inherited properties in CSS are listed in the StackOverflow answer below, I'll encourage you to check it out.

Here is the list of all inheritable properies I'm working with W3C's information, so I'd guess it should be correct. But knowing web browsers (IE specifically), some of these might not be inheritable by all browsers:

  1. azimuth
  2. border-collapse
  3. border-spacing
  4. caption-side
  5. color
  6. cursor
  7. direction
  8. elevation
  9. empty-cells
  10. font-family
  11. font-size
  12. font-style
  13. font-variant

*The initial value of a CSS property is its default value.

Up next, The Box Model.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on Oct 31 '19 by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide