Ok, I have to confess I have a real nit-pick-turned-ax-to-grind when it comes to how the cascade gets discussed. I get annoyed when, to get performance gains, it is recommended to "in-line" the critical path CSS. That's incorrect, pedantically speaking. Here's how the author written CSS gets connected to the HTML:
- Linked CSS. Using
<link rel="stylesheet">is lovely and wonderful, but it is the weakest in the line of succession. Styles written with the following methods will override declarations contained in the external, linked CSS file. - Embedded CSS. Use of a
<style>tag in an HTML file will take precedence over declarations in a linked file, if there are collisions in the way CSS has been architected. This is the what should be used if you aim improve performance with critical path CSS inclusion. - Inline CSS. Use of
style=""on a specific element in the DOM trumps the 2 previous forms of CSS if a rendering engine encounters overlapping style declarations. Do not write your CSS here to get performance gains. It's too hard to maintain this way. - !important. Use of
!importantwill basically break any ties, but it makes the code more brittle and is highly discouraged. Use with extreme caution.
Benjamin Johnson provides a more extensive explanation of the cascade outlining additional topics to factor in that I didn't mention above.
Kids, remember that you are not "inlining" your CSS for performance gains. You are "embedding" your CSS. Embeeeedding.