CSS order

CSS order refers to the sequence in which CSS rules are applied to HTML elements. When multiple CSS rules target the same element and have conflicting styles, the order in which they are defined determines which style will be applied.

The general rule is that the last defined rule takes precedence over earlier rules. This means that if two rules target the same property of an element, the one defined last will be applied.

Conflicting styles include different property values, such as font-size or color, as well as the use of !important declarations which can override the cascade order.

Let's look at an example to better understand how CSS order works:

            <div id="example-div" style="color: blue;">
                This is some text.
            </div>

            /* CSS rule in an external stylesheet */
            #example-div {
                color: red;
            }
        

In this example, we have an HTML <div> element with an inline style that sets the text color to blue. However, we also have a CSS rule in an external stylesheet that targets the same element and sets the color to red.

Due to the CSS order, the color red will be applied to the <div> element because the external stylesheet rule is defined after the inline style.