Current browsers will display content after linked stylesheets when they are fully loaded. This allows you to avoid flickering content, otherwise you will always see pages for a short time without the rules of the applied styles.
And since the stylesheet has a delay of 10 seconds, part of the page rendering will be delayed by 10 seconds.
This applies not only to style sheets, but also to scripts (which do not load with the async attribute).
EDIT To Ryan Kinal . There are several passages in browsers. One that parses the html code and which will start loading the found resources. And one pass that will execute the resource and make the html in order. Therefore, style sheets and scripts are not necessarily loaded in order. The only important part is that they are applied / executed in the order in which they appear in the html structure.
This is similar to a construction guide, where you need to do things step by step. You can read it before building. Order the necessary items. But you can only continue from the next step at a time when you get the necessary items for this step. Therefore, if you received everything except the first part, you cannot begin to build.
Google developer: put CSS in the title of the document
[...] Browsers block the display of a webpage until all external stylesheets have been loaded. [...] Therefore, it is important to place links to external style sheets, as well as inline style blocks at the top of the page. After making sure that the stylesheets are loaded and parsed first, you can let the browser gradually display the page. [...]
Google developer: streamline styles and scripts
[...] Since JavaScript code can modify the content and layout of a web page, the browser delays the rendering of any content following the script tag until the script is loaded, parsed, and executed. However, more importantly for temporary disabling, many browsers block the loading of resources mentioned in the document after the scripts until these scripts are downloaded and executed. On the other hand, if other files are already loaded when accessing the JS file, the JS file is loaded in parallel with them. [...]
MDN: Tips for Creating Fast-Loading HTML Pages: Minimize File Counts
Too much time spent requesting the last modified time of the link files may delay the initial display of the web page, as the browser must check the modification time for each CSS or JavaScript file before displaying the page.
MDN: optimizing your pages for speculative analysis
Traditionally, in browsers, the HTML parser works in the main thread and blocks after the </script> tag until the script is retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing of the main thread. It parses ahead when scripts are loaded and executed. Like Firefox 3.5 and 3.6, the HTML parser launches speculative loads for scripts, style sheets, and images that it finds ahead of the stream. However, in Firefox 4 and later, the HTML parser also runs the speculative HTML tree algorithm. The surface is that when speculation succeeds, there is no need to rewrite part of the input file that has already been checked for scripts, style sheets, and images. The disadvantage is that more work is lost when speculation fails