Html - Css Link Order

I came across css link orders in a html file from CodeCademy. I just can't get the logic of linking css files. Why do we have to link the files according to this order below? Is it

Solution 1:

From the CSS spec:

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Order matters, because, when rules conflict, order is a factor in deciding which one wins.

Solution 2:

Later rules override earlier rules (if they're equally specific). For example, if one CSS file does:

a { color: red; }

and a later one does:

a { color: black; }

your links will be black.

As a result, typically, you'd include the various frameworks you're using first, with your applications's CSS as the last file. This allows you to override their styles as desired.

Solution 3:

Due to the cascade nature of a stylesheet, the latter styling overwrite the earlier styling.

For example, if there are two selectors with different height, the latter specified one wins.

Lets say we have:

#div {
    height:50px;
}

#div {
    height:100px;
}

The height of the #div will be 100px not 50px because 100px is declared later. Therefore, it over-writes 50px.