CSS Inheritance

Written by Tom White on . Posted in CSS

With CSS Inheritance, we can style an element or group of elements intelligently by essentially doing the absolute minimum required to style an element without having to re-write the entire CSS rule for the element(s) in question.

CSS Inheritance makes it easy to tweak styles on certain elements without having to write entirely separate definitions from scratch, but can also cause a lot of frustration if styles are being unintentionally inherited.

When using CSS Inheritance it's important to understand the order in which styles load and what priority conflicting rules have over each other. Just like HTML, CSS files are read like a book - top to bottom, left to right. When the browser loads the CSS file, it will apply the last 'read' attributes of the rule to elements on the page, while leaving attributes set by previous rules alone so long as the new rule doesn't overwrite it.

For instance, take these two CSS definitions:

.page-header  {font-size:26px; margin:10px 0px}
h1.page-header {margin:5px 5px;}

In this case, any h1 element that has the class page-header will end up with a font-size of 26px and a margin of 5px 0px;

Built with HTML5 and CSS3
Copyright © 2014 Sitepearl