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.
Put CSS in the Document Head
Benefits of CSS Location
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.
YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.