Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the purpose of using font: inherit?

Tags:

css

I just wanted to know why font: inherit; is used in Cascading Style Sheets.

like image 597
Soumya Rauth Avatar asked Oct 14 '12 08:10

Soumya Rauth


People also ask

What is the use of inherit in HTML?

The inherit keyword specifies that a property should inherit its value from its parent element. The inherit keyword can be used for any CSS property, and on any HTML element.

What does inherited value mean?

Each property may also have a cascaded value of 'inherit', which means that, for a given element, the property takes as specified value the computed value of the element's parent. The 'inherit' value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.


2 Answers

Like the other answers have said, it’s to inherit a CSS property from the parent element.

What the other answers have failed to say is why you’d need this. Because, after all, CSS properties are inherited anyway, right?

Well, no. Most are, by default (but link colour isn’t inherited from the parent element, for instance). But consider this case:

p { color: blue; }  div.important { color: red; } 
<div class="important">     <p>This is a text</p> </div> 

Now the text will be blue, not red. If we want the <p> to have its parent’s styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don’t repeat yourself). Instead, we inherit it:

div.important p { color: inherit; } 
like image 97
Konrad Rudolph Avatar answered Sep 23 '22 15:09

Konrad Rudolph


The declaration font:inherit is used in many “CSS Reset” stylesheets, which have often been copied into various libraries and frameworks. The original Reset CSS by Eric Meyer has font:inherit. No specific motivation is given. The overall rationale is said to be “to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”. But Meyer links to a previous post of his where he explains the idea, saying, among other things: “I want all this because I don’t want to take style effects for granted. This serves two purposes. First, it makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.”

Several HTML elements have a default rendering in browsers as regards to font properties: headings, form fields, table header cells, some phrase elements, etc. Using CSS Reset, or specifically font: inherit means that on browsers supporting the inherit value, all such elements are rendered in copy text font, unless otherwise specified in a style sheet.

So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design. It has gained popularity and often applied routinely.

like image 36
Jukka K. Korpela Avatar answered Sep 19 '22 15:09

Jukka K. Korpela