The Cascade

Two rules can set the same property for the same element. The browser then has to decide which declaration to use. This decision process is called the cascade, and CSS is named after it: Cascading Style Sheets.

The cascade takes several things into account. The simplest one is the order: when two rules have the same selector, the one written later in the stylesheet wins.

p {
	color: green;
}

p {
	color: purple;
}

The paragraphs will be purple, because the second rule comes later. Declarations that don’t conflict all apply: if the first rule also contained text-align: center, the paragraphs would be purple and centered.

When one of your rules “doesn’t work”, first check whether a rule written later overrides it.

Instructions

At the very beginning of style.css, above all the other rules, create a rule for h2 that sets color: darkolivegreen. Click Run: the headings stay sienna! The rule for h2 further down sets color too, and because it comes later, it wins.

Fix it so that the headings are dark olive green: delete the original rule for h2 with color: sienna further down in the file.

Start programming for free

12/15