What's the difference if I put css file inside or?
When you place your CSS in the <head>, the user experience significantly improves as the page loads smoothly and as intended. This placement prevents a FOUC (Flash of Unstyled Content), which is when users see an unstyled page.
The recommended placement for CSS is:
It's recommended because the styles are applied as the page loads, not after, which is what happens if CSS is loaded in the <body>.
Understanding the Nested Realities of CSS Placement
Speed factor: The '<head>` advantage
Placing the CSS inside the <head> tag boosts page loading speed. How? Browsers wait for all styles inside <head> to load before rendering the page, eliminating any prospect of re-rendering—a hidden performance killer. As a result, your content appears faster, enhancing both the perceived speed and actual load time.
Boosting SEO with styling-first approach
Effective SEO is a game of simple tweaks, and one such is loading your CSS before your content. Search engines prioritize styled content for page snapshots, directly affecting how your web pages are indexed. Placing CSS in the <body> might lead to unstyled content influencing SEO indexing.
A tidy house: Separation of content and style
Picture your HTML as a box that holds content, and CSS as the design of that box. By placing CSS in the <body>, you mix the design with the content—Leading to a confusing codebase with harder maintenance and collaboration.
CSS in '<body>`: Might it Ever Make Sense?
The exceptional non-critical CSS
Sometimes, to elevate perceived performance, you can place non-critical CSS—styles not needed immediately—at the end of the <body>. This way, users interact with the main content faster while the remaining styles load concurrently—a sneaky way of multitasking!
Inline styles to the rescue
Let's give inline styles their moment. When styles are specific to a single element and need to be dynamically generated (JavaScript, anyone?) — these can be conveniently placed inline within the content in the <body>.
Scoped styles? Maybe, but...
The now-obsolete scoped attribute allowed <style> within the body tag to only apply to a specific section. But beware! Relying on it for CSS placement is a no-go due to poor browser support and removal from the HTML specification.
The Subtleties and the Superfluousness of CSS Placement
Browser consistency
Consistent page rendering across browsers becomes reality when you put CSS in <head>. Why risk incongruities when different browsers handle late-loading styles differently?
Modern dev practices
In the world of modern web development, user experience takes the helm. Utilizing CSS preprocessors and critical CSS extraction mitigates performance impact—keeping your user experience design intact.
JavaScript dependencies
When using JavaScript libraries like JQuery UI that come with CSS, developers sometimes place these styles near the end of the <body> for sequencing style and script loading. However, careful planning is necessary to minimize impact on user experience.
Was this article helpful?