The Cascading Order

In this lesson we will learn the details of the cascading order. Let's begin!

We'll cover the following

Now, you have a basic understanding of the syntax and semantics of style sheets.

When your page is displayed, all style rules that match an HTML tag are utilized to determine the visual properties of that specific tag.

While these rules set separate properties, it’s easy to define the result: all property settings are applied to the HTML tag. Of course, the ones that are not applicable are simply omitted.

It may happen that multiple rules define values for the same property. While these rules define exactly the same property value, it does not matter which rule wins, because they all set the same value. However, most often these are different values and you must know which value is used.

CSS was designed with the intention to allow assigning multiple rules to the same element.

As you already know, each browser has its own default style sheet that sets a number of properties for each type of HTML tag.

If you add a style sheet to the page, regardless if it’s an internal or external style sheet, it is very likely that there are competing styles, because your style assignment may compete with the browser’s default one.

Browsers use the cascading order to determine which rule in a set of competing rules gets applied.

Get hands-on with 1200+ tech skills courses.