Course: CSS Basics

Cascading and Priority [11/15]

When, in the previous task, we had set the background color for the rules using the truth class, one of the properties of the second paragraph was overriden:

p {
  padding: 10px;
  background-color: #dff0d8;
.truth {
  background-color: #aaddff;
styles for the second paragraph {
  padding: 10px;
  background-color: #dff0d8;
  background-color: #aaddff;

When several CSS rules with identical properties exist for a given element, the browser uses priority and specificity to choose among them. Slightly simplifying, we can say that:

  1. The highest priority has a CSS rule set by the style attribute.
  2. The next priority has the id selector.
  3. Then follows the class selector,
  4. Then goes the tag name selector.

In reality, a more complex mechanism is used to identify priorities and specificities. It is detailed in the upcoming "Inheriting and Cascading" course.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cascading and Priority</title> </head> <body> <h1>Cascading and Priority</h1> <p class="blue">Cascading is a very powerful mechanism.</p> <p class="green">A web developer who has learned the secrets of cascading becomes an enlightened master of web coding.</p> <p class="blue green">A web developer who is not seeking to understand cascading will stay an apprentice forever.</p> </body> </html>
p { padding: 10px; outline: 2px solid rgba(0, 0, 0, 0.1); } .green { background-color: #dff0d8; } .blue { background-color: #aaddff; }
HTML Academy

Now you have learned quite enough to solve a small puzzle. The HTML editor in the task has been locked. The first paragraph has been assigned the blueclass, the second paragraph - the green class, and the third paragraph has both classes, blue and green.

  1. Change the order of the CSS rules to make the background of the third paragraph green.

Please don't change values of the other properties or selectors. Just experiment with the order of CSS rules.

Theory Check Next