The <style>
only contains a subset of all CSS rules to get some initial styling (in the example case only the .blue
rule). You still need the full css file, but it's only loaded after page load. And in case JS is disabled, it's ensured to always load. If JS is enabled, it's deferred until the page is fully loaded (otherwise the link tag would block rendering.)
The original small.css is loaded after onload of the page. The application order of CSS rules is maintained by injecting all the and elements into the document through javascript.