How to correctly load a stylesheet within the body?
You can add your css in the head dynamically as well like below:
jsCode:
var head = document.getElementsByTagName("head")[0],
cssLink = document.createElement("link");
cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";
head.appendChild(cssLink);
What's the difference if I put css file inside head or body?
Just to add on to what jdelStrother has mentioned about w3 specs and ARTstudio about browser rendering.
It is recommended because when you have the CSS declared before <body>
starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.
Also, if you leave the styles somewhere in the <body>
, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
How to load up CSS files using Javascript?
Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute
unfortunately IE6 doesn't support it consistently.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.example/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
This example checks if the CSS was already added so it adds it only once.
Put that code into a JavaScript file, have the end-user simply include the JavaScript, and make sure the CSS path is absolute so it is loaded from your servers.
VanillaJS
Here is an example that uses plain JavaScript to inject a CSS link into the head
element based on the filename portion of the URL:
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );
</script>
Insert the code just before the closing head
tag and the CSS will be loaded before the page is rendered. Using an external JavaScript (.js
) file will cause a Flash of unstyled content (FOUC) to appear.
External CSS file is not loading with link tag
link
tag uses href
attribute as opposed the the src
as you have specified. Please change and check.
Is it appropriate to place a stylesheet within the body tag
you shouldn't place styles within the body tag, but assuming you're using a server side script (PHP?) to link both header and content, why not write your own class to generate your pages; you could have a method that add styles to the header, and one that outputs the page for instance.
Having stylesheet link in body?
The only reason I've seen people use to justify doing this is when they're using certain templating engines, and they can't arbitrarily change the stylesheets linked in the head when loading new content or a particular view (in the case of MVC frameworks).
Either way, this should be avoided at all costs as it's sloppy, and improper. Instead, always develop your projects in such a way that you can get an arbitrary stylesheet into the head at any time. I generally do this by cycling through a stylesheet array in the head. That way, if I need to add a new stylesheet, I simply add its pathname to the array to be printed in the head.
<?php
$styles = array();
$styles[] = "css/main.css";
$styles[] = "css/text.css";
?>
<head>
<?php foreach ($styles as $style) { ?>
<link href="<?php print $style; ?>" rel="stylesheet" type="text/css" />
<?php } ?>
</head>
Related Topics
How to Vertical Center Text Next to an Image in HTML/CSS
Stripping Out HTML Tags from a String
How to Set Background-Color on 50% of Area CSS
Multiple Distinct Pages in One HTML File
How to Write Text on a HTML5 Canvas Element
Why Isn't My Margin Working with Position: Fixed
How to Set Favicon.Ico Properly on Vue.Js Webpack Project
How to Center Cards in Bootstrap 4
Mailto Links Do Nothing in Chrome But Work in Firefox
How to Use a Grammar with The HTML 5 Speech Input API
Frozen Table Header Inside Scrollable Div
CSS Calc Not Working in Safari and Fallback
How to Use Webp Images and Support Safari
What Is The Browser-Default Background Color When Selecting Text