Skip to main content

Getting StartED with CSS

Why are they called “cascading” style sheets?

The cascade in CSS refers to the way that rules are added together and applied cumulatively. Think of the cascade in the literal sense of a waterfall or a river. As a river flows from the mountains to the sea, it starts off as a tiny trickle, but as more water is added through tributaries, it becomes bigger and more powerful. Yet the water in that original trickle is still part of the whole.

CSS works in a similar way. You can create a style rule that trickles down through the whole page. For example, it’s common to set the background and text colors in a rule for the body of the page. But lower down, new rules can be added that affect the font or size of the text without changing the color. And just like a river can break into a delta as it reaches the sea, you can break the CSS cascade into different strands, so that a sidebar looks different from the main content or footer of the page.

Understanding how the cascade works isn’t easy when you first start using CSS, but it’s vital to working with CSS efficiently. It will also save you lots of agony and frustration trying to work out why your styles aren’t applied the way you expect.

The important things to remember are these:

In most cases, the order of your style rules doesn’t matter. However, the cascade plays an important role when there’s a conflict between rules. As a basic principle, style rules that appear lower down in a style sheet or <style> block override any previous rules in the case of a direct conflict. However, the type of selector you use also plays a big role, as explained in the next section.

Working out which rules have priority

The “pecking order” of style rules is controlled by a principle called specificity. This determines which rule is more specific and therefore takes precedence over any conflicting rule. To understand specificity, you need to know about the different types of selectors, all of which are described in the reference section of this website. You’ll also learn a lot about the various selectors in the exercises in the Getting StartED with CSS book.

Once you understand selectors, the easy way of calculating specificity is to use the following scoring system:

You simply assign a score to each part of the selector and add them up—the highest total wins in the case of a conflict of rules. To give a simple example, the following rules set the font size and color of paragraphs:

p { font-size: 12px; color: black; } #mainContent p { font-size: 14px; color: teal; }

Using the specificity calculator, the first rule uses a type selector on its own, so has a value of just 1. The second rule is a descendant selector that uses an ID selector in combination with a type selector, so its specificity value is 101. Although 101 is greater than 1, it doesn’t mean that #mainContent p always wins. It’s only when there’s a conflict. The #mainContent p selector targets paragraphs inside an element (usually a <div>) that has the ID mainContent. So, those paragraphs are rendered at 14px and in teal. However, all other paragraphs—assuming there’s no other conflict—are rendered at 12px and in black.

If you are only just starting CSS, this is probably difficult to understand. The simple rule to remember is that, if a style rule isn’t being applied as expected, first check if a conflicting rule is lower down in the style sheet. If moving the rule that you want applied lower down doesn’t have the desired effect, calculate the specificity of the conflicting rules. If necessary, chose a more specific selector to apply the style rule where you want it.