I’m noticing that in a document, when I placed a linked stylesheet <link rel="stylesheet"...> below a <style... element, if there are conflicting rules, the linked style sheet will win out and that’s what’s use in the document.
I was under the impression that no matter where a external stylesheet is physically placed in the source code, the browser will always treat it as coming “before” and embedded styles (<styles..)
So, is the browser behaving correctly or incorrectly, and/or is always best to just physically place all external stylesheet links first in the source code?
No, that’s not the case. In terms of external vs embedded styles, it’s purely a case of what the browser sees last, unless a prior rule has a higher specificity. The only exception, I believe, is when there’s an inline style on the element itself. I’m pretty sure that overrides everything else, but I’m a bit rusty!
OK, thank you! I guess that’s why most tend to place their externals before all else. Good to know. And yeah, you’re right, inline style have a higher specificity value than embeds or externals.