HTML - CSS Link Order
Question
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 somehow related to programming where we must first define the header file which contains the functions before using them? Is that logic applicable at linking a CSS file too? Could someone please provide a comprehensive explanation for this question? :D
<head> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css"> <link rel="stylesheet" href="main.css"> </head>
Does the order of attributes matter inside the link element? For example <link href="" rel=""> and <link rel="" href=""> , what's the effect of having href as precedence compared to rel?
3 answers
solution1
3 2014-10-28 15:08:43
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.
solution2
3 2014-10-28 15:09:12
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.
solution3
2 2014-10-28 15:09:30
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.