Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it correct to use the <style> tag outside of the <head> element?

Tags:

html

css

cgi

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 ?

like image 779
azbc Avatar asked Mar 05 '17 12:03

azbc


People also ask

Can style tag be outside of head?

The <style> element must be included inside the <head> of the document.

Does a style tag need to be in the head?

According to the current spec, yes, style elements must always be in the head . There are no exceptions (except a style element inside a template element, if you want to count that).

Can I add CSS outside the head?

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.

Can I put style tag anywhere in HTML?

You can use any physical style tag anywhere you can use an item allowed in text. In general, this means anywhere within a document, except in the <title> , <listing> , and <xmp> tags.


1 Answers

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"

like image 182
Panu Logic Avatar answered Sep 28 '22 03:09

Panu Logic