HML is loaded and executed line by line. So, when you place stylesheets in <head> tags, the page is rendered and styled at the same time. Therefore, when the webpage loads, it looks and feels the way it is supposed to be.
<head> <link rel="stylesheet" href="mystyle.css" /> <head>
However, when stylesheets are linked at the bottom of the <body> tag, the bare minimum HTML is rendered first and then CSS styles are applied to it. This makes your page render two times:
- In the first render, only bare minimum HTML is loaded and rendered.
- In the second render, the style will be applied and the page is rendered again. This may make HTML elements to shift in size, shape, color and may make the webpage to flicker.
To prevent this kind of behavior we should always place CSS <link> tags inside the <head> tag.