Cascade

Now we have come to one of the most important mechanisms within CSS: the cascade. This is what the “C” in the abbreviation “CSS” (Cascading Style Sheets) stands for.

When the browser renders a page, it must determine the final appearance of each HTML element. To do this, it collects all of the CSS rules that apply to each element, because, after all, several CSS rules can affect the element at the same time. For example:

<p class="beloved-color">Green is my favorite color</p>

This element may be simultaneously influenced by the CSS rules for the tag p and the class beloved-color from our styles. Indeed, even the CSS rule for the p tag from the browser’s default styles affects this element.

After all the rules for an element are collected, the browser combines all of the properties from these rules and applies them to the element. If the following bit of code exists in our styles:

p { font-size: 14px; }
.beloved-color { color: green; }

then our paragraph about color will be assigned the following final set of properties and values:

font-size: 14px; /* From the rule for p in our styles */
color: green;    /* From the rule from .beloved-color in our styles */
margin: 1em 0;   /* From the rule for p in browser styles */

This mechanism, which is used to combine styles from different sources into a final set of properties and values for each tag, is called cascading.

Let’s continue to determine the design of the list of skills, and at the same time let’s apply the cascade.