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.