Stack Snippets are great, but I keep running into a recurring problem: external CSS is injected directly into the <body>
tag and not the <head>
but the internal CSS is injected into the <head>
. This gives the following HTML structure:
head
style --> internal
body
link --> external
The internal style is parsed first, and then the external files are parsed afterwards, meaning the external CSS overrides the internal CSS's declarations.
Example
p {
font-size: 100px;
}
<link href="http://meta.stackoverflow.com/content/Sites/stackoverflowmeta/all.css?v=15d89b6948a8" rel="stylesheet"/>
<p>Hello, world!</p>
Here I've included Meta's own stylesheet as an external library.
The result should end up looking like this:
But instead it looks like this:
This is because the external CSS's style overrides the internal style: