Is it correct to use the <style> tag outside of the <head> element ?
Like this:
<html>
<head>
<style> some style </style>
</head>
<body> some text </body>
<style> some more style </style>
<body> some more text </body>
</html>
I want to do this because: my cgi sources other files with their own style.
The cgi file contains:
#!/bin/bash
echo "content-type: text/html"
echo ""
echo "<html><head><style>"
echo "h1 {color: red;}"
echo "</style>"
echo "<body>"
echo "<h1> some text here </h1>"
echo "</body>"
source ./data.sh
echo "</html>"
And the source file contains:
echo "<style>"
echo "h2 {color: blue;}"
echo "</style>"
echo "<body>"
echo "<h2> and some other text here </h2>"
echo "</body>"
This seems to work fine. But is it correct ?
At w3schools it says:
Each HTML document can contain multiple <style> tags.
But is it done this way ?
style is supposed to be included only on the head of the document.
Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.
HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.
According to the W3 specs, <link> tags are only supposed to go in the <head> section:
References
For HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK
For HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element
Validation Issues
If you put a tag within the body of the HTML document, it will not validate using validate.w3.org
<style> tags can be anywhere in the HTML Document. However, it is best to have it inside the <head>.
From my personal experience, its best to just make a separate stylesheet to put all the CSS in.
According to W3 standards, it is necessary to put style tag inside the head element of the document. If you put your style tag inside the body element then the style to your web page will be effected after whole DOM is loaded, due to which we can see blank page for some time before the CSS comes into effect and certainly that would cause impact on better UI experience. Mostly the recommended way to implement CSS in a document is to create a saperate stylesheet and providing link to the document wherever needed.
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style :
"<style>-element can be included inside the <head> or <body> of the document, and the styles will still be applied, however it is recommended that you include your styles in the <head> for organizational purposes"
I think the key-phrase here is "for organizational purposes". So it's not a technical requirement but advise which purports to make your html-source more readable.
The above linked-to page is
"Last modified: Jun 4, 2019, by MDN contributors"
It really depends on the website and how it loads. CSS files which are loaded in the header block your website from rendering so you can inline CSS in the header or the body. This is because the CSS file must be fetched (through the network or locally) which can impact performance. In a perfect world you only have one css file but the world is not perfect.
A new feature available on most major browsers..
Stylesheets activated after the body is started do not block paint
[https://www.chromestatus.com/feature/5696805480169472][1]
<body class="gorgias-loaded">
<p>This page includes an image, followed by an external css file that is appended to the document by js (async) followed by another image.
The css file changes the page background color black when it has been applied.</p>
<p>Optimally what you will see would be:</p>
<ol>
<li>A blank white page with this text and the title for both images.</li>
<li>Immediately after, the second image.</li>
<li>One second later the first image.</li>
<li>Four seconds later the background color should change to black.</li>
</ol>
<h2>First Image (1 second delay)</h2>
<img width="300" height="365" src="slowimage.php">
<h2>External CSS injected by JS (5 second delay)</h2>
<script>
var attach = document.getElementsByTagName('script')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'slowcss.php';
link.media = 'all';
attach.appendChild(link);
<link rel="stylesheet" type="text/css" href="slowcss.php" media="all"></script>
<h2>Second Image (no delay)</h2>
<img width="300" height="365" src="slowimage.php?delay=0">
</div></body>
