CSS3 Inheritance Tips and Tricks

Share this article

It’s easy to overlook the cascading features of stylesheets. Most developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of…

property: inherit;

The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. Ultimately, it ends at the browser default, e.g.
#myparent
{
	margin: 10px;
	border: 1px solid #000;
}

/* use the same border as the parent */
#myparent p
{
	border: inherit;
}
In practice, it’s rarely necessary to use inherit. Many of the more useful properties automatically cascade down, e.g. fonts, font sizes, colors, etc. inherit is safe to use. It’s not supported in IE6 and IE7 but your design is unlikely to break without it.

property: initial;

Ooo, a shiny new CSS3 keyword! initial
sets a property back to its starting value — the default defined by the browser, e.g.
body
{
	font-size: 0.5em;
}

/* reset paragraphs to 1em */
p
{
	font-size: initial;
}
Is it useful? Potentially, although you can’t necessarily depend on all browsers having the same default value. Support is reasonable — Chrome, Firefox, Safari and Opera 15+. It won’t work in IE, but I’m struggling to think of a situation where that would be a catastrophic problem.

property: unset;

This is a slightly unusual one. When unset is used, it acts as if it were inherit when an inherited value is available. If it can’t find one — for example, it’s a non-inherited property such as box-shadow — it acts like initial and applies the default browser value. Admittedly, I can’t think of many uses for unset and it has little support at this time.

all: [ inherit | initial | unset ];

Finally, all is a property rather than a value. You can assign either inherit, initial or unset to affect all properties, e.g. to reset every CSS property back to the browser default:
#mywidget
{
	all: initial;
}
This could be an alternative to scoped CSS if you’re adding third party widgets to a page and want to avoid stylesheet clashing. Unfortunately, you won’t be able to depend on consistent cross-browser support for some time yet, but it could be a useful property to watch.

Frequently Asked Questions about CSS3 Inheritance Tips and Tricks

What is CSS3 inheritance and how does it work?

CSS3 inheritance is a fundamental concept in web design and development. It refers to the way CSS properties are passed from a parent element to its child elements in the HTML document. This means that if you set a property, like font color, on a parent element, all its child elements will inherit that property unless you specify otherwise. This can greatly simplify your CSS and make your code more efficient.

How can I override inherited CSS properties?

Overriding inherited CSS properties can be done by specifying a different value for the property on the child element. This can be done in the CSS file or inline in the HTML document. For example, if a parent element has a font color of blue, you can override this on a child element by specifying a different font color for that child element.

What are some tips for using CSS3 inheritance effectively?

One of the best tips for using CSS3 inheritance effectively is to use it to reduce redundancy in your code. By setting common properties on parent elements, you can avoid having to specify those properties on each child element. Another tip is to use the “inherit” value for properties that you want to explicitly inherit from the parent element. This can be useful for ensuring consistency across your site.

What are some common pitfalls to avoid when using CSS3 inheritance?

One common pitfall to avoid when using CSS3 inheritance is overusing it. While inheritance can simplify your code, it can also make it more difficult to understand and maintain if overused. Another pitfall is forgetting that some properties, like background color, do not inherit by default. You need to explicitly set these properties to “inherit” if you want them to be passed down to child elements.

How does CSS3 inheritance affect performance?

CSS3 inheritance can have a positive impact on performance by reducing the amount of code that needs to be processed. By setting common properties on parent elements, you can avoid having to specify those properties on each child element, which can reduce the amount of CSS that needs to be parsed and applied.

Can I control which properties are inherited?

Yes, you can control which properties are inherited by using the “inherit” value. This tells the browser to use the computed value of the property from the parent element. If the parent element does not have a computed value for the property, the initial value of the property is used.

Are there any properties that cannot be inherited?

Yes, there are some properties that cannot be inherited, such as box-sizing, margin, border, padding, and background. These properties need to be explicitly set on each element that you want to apply them to.

How can I use CSS3 inheritance to create a consistent look and feel across my site?

You can use CSS3 inheritance to create a consistent look and feel across your site by setting common properties on parent elements. This can include things like font family, font size, color, and line height. By doing this, you can ensure that these properties are consistent across all child elements unless you specify otherwise.

Can I use CSS3 inheritance with CSS frameworks like Bootstrap?

Yes, you can use CSS3 inheritance with CSS frameworks like Bootstrap. In fact, many CSS frameworks rely on inheritance to apply their styles. However, keep in mind that the framework may have its own rules and conventions for inheritance that you need to follow.

How can I learn more about CSS3 inheritance?

There are many resources available for learning more about CSS3 inheritance. This includes online tutorials, books, and courses. You can also experiment with inheritance in your own projects to get a feel for how it works.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

CSS3HTML5 Tutorials & Articlesinheritance
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week