Put CSS in the Document Head

As we have outlined in previous sections, there are multiple ways to add CSS to HTML. You can inline CSS, you can keep CSS separate from your HTML by linking to an external sheet, or as we will discuss here, you can put CSS in the document head section of the HTML document, which is also referred to as internal CSS. While it may not seem important where CSS is located, it can impact page performance and what the user sees on the page. For example, external CSS that is called in the HTML body instead of the document head will delay the page load, as the browser must parse and render these first before anything else. Additionally, any inline CSS in the body can users to see layout and style shifts, so any external CSS or inline CSS should be placed in the document head so the browser processes these first, and the rest of the page can be rendered. However, if the CSS file is small enough, then inlining is a viable alternative.