The only browsers that don’t support the inherit value are IE6 and IE7 (shocking, I know). And naturally, if you need to reverse the inheritance, you can either remove the property/value pair, or else set it to “normal” instead. Whatever the case, just know that you have the option to use the inherit value. Or maybe you want access to an easy way to change the value via JavaScript or jQuery.
There might also be default styles set by the user agent that you want to override (assuming you’re not already doing so in a CSS reset). Maybe there are other paragraphs with borders set, and so you don’t want those to be affected. But there could be some instances where the inherit method would work better. After all, you can just do this:Īnd that would accomplish the same thing.
Bypass inherit font size css skin#
Of course, this seems like just another way to skin the cat, as they say. So, if for some strange reason, you wanted all of your paragraphs to inherit the hot pink border of their parent element, then the code above would accomplish this. Here’s an example of how you might do this: If you want, however, you can force a property in a child element to inherit the value for that property from its parent by using the inherit value. So, a number of properties in the CSS specification are able to naturally pass on their values to child elements. This prevents your CSS from looking something like this: This is useful because it prevents needing to define that same property for all children.įor example, the font-size property can be set (as it often is) on the element, and virtually every element that is a child of will inherit that font-size setting. In CSS, there are some properties that are naturally inherited from parent to child.