Course: CSS Basics

Cascading. Cocktail of Classes [12/15]

It looks like you have solved the puzzle! Nice Job!

All you had to do is to move the CSS rule for the green class under the blue class rule. When several CSS rules are applied to a single element, their priority is determined by their selector. If such selectors belong to the same type, as in the above case, then the higher priority is given to the CSS rule which is lowest in the code.

So, let's now summarize. You can assign several classes to the same element. Based on cascading, CSS rules assigned to the classes are combined, and if the properties get into conflict, their priority is analyzed.

Assigning of multiple classes to a single element is a very flexible and powerful web development tool. It allows you to simplify and substantially shorten your CSS code.

Imagine that your layout has multiple blocks sharing the same background, text color, paddings and margins. Instead of adding the same CSS properties to each block again and again, you can create a common class for them and use it in your HTML code. And, if you need to change styling for such blocks, all you have to do is just to change this single class in CSS.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cascading. Cocktail of Classes</title> </head> <body> <h1>Cascading Cocktail of Classes</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">A web developer who is not seeking to understand cascading will stay an apprentice forever.</p> </body> </html>
p { padding: 10px; } .green { background-color: #dff0d8; } .blue { background-color: #aaddff; } .nice-box { border-radius: 5px; box-shadow: 3px 3px 4px #cccccc; }
HTML Academy

Let's now practice with multiple classes. How can we set several classes?

  1. To each paragraph, add the nice-box class.
  2. In the CSS rule for nice-box, set border-radius: 15px;.
Theory Check Next