CSS Specificity and Inheritance: The Cascade

Being a front end web developer, I use a lot of CSS to make websites look the way they do. Last week, I wrote about semantics in front end web development. Today, I will write about CSS concepts, specificity and inheritance.

CSS Specificity

Specificity in CSS refers to how specific a CSS selector is. The list below shows the levels of specificity from most specific to least specific:

1. Inline styles applied directly to HTML tags by using the style attribute
2. IDs such as #container
3. Classes such as .foobar, attribute such as [type="text"], and Pseudo-classes such as :hover
4. HTML tags such as ul, p, etc.

Specificity determines what styles will be applied to the elements on a page based on the weight of these selectors. The more specific style takes priority over the less specific style.

It is also important to note that !important will have priority over all other styles defined. This is one of the reasons why some developers argue that !important should be used sparingly.

CSS Inheritance

One of the first things a front end developer learns about when starting out is how to write HTML codes. One of the features of HTML is that certain elements could be nested inside other elements, as shown below:

<div id="foo">
	<div class="bar">
		<p class="qux">Content goes here.</p>
	</div>
</div>

Let us assume the CSS for the HTML above is something like this:

#foo {
	font-size: 14px;
        background: yellow;
}

.bar {
	color: red;
}

Because the font-size for #foo was defined and because .bar is nested inside #foo, the content inside .bar will have the font size of 14px. This is called inheritance. The paragraph text inside .bar will be red because of the color defined for .bar. This is referred to as paragraph inheriting the styles for .bar.

One thing that is not inherited is background. That is because the background property of an element is set to transparent by default.

CSS: Cascading Style Sheets

CSS specificity and inheritance bring up an important feature of CSS: the cascade. The cascade, as in Cascading Style Sheets, demonstrates how specificity and inheritance work together to influence the look of a web page. Let us consider the above HTML example again, and let us assume that the CSS below applies.

p {
	border: 1px solid #000;
	padding: 10px;
	font-size: 10px;
}

p.qux {
	font-size: 14px;
}

The paragraph in the above example will have border and padding applied to it even though the style for p.qux doesn’t state those properties. The paragraph, however, will not inherit font-size and will be 14px instead of 10px because it was defined on p.qux, which has a higher weight of specificity than p.

Generally, author style sheets, which the developers apply to a web page, will take priority, followed by user defined styles and then by browser defined styles. Within each stylesheet, specificity of selectors will determine how styles are defined.

Conclusion

Understanding these fundamentals about Cascading Style Sheets will make it easier to learn other concepts in CSS. If you enjoyed this post, check out my other CSS basics pots such as A look into CSS z-index property and CSS Box Model Explained.