Menu
I am using a CMS and apparently it has a bug that will not allow me to add any content to the <head> of a blog post. It inserts everything into the body which in most cases that works okay but in an instance of code like this:
<style type="text/css">
.slideshow img { display: none }
.slideshow img.first { display: block }
</style>
Will that type of code run if put inside the <body> tag in all major browsers? (IE8+, Firefox, Chrome, and Safari.) Normally that is always in the <head> of the page.
Note: This appears to work in FF 15 but I am not sure of other browsers.
485
The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.
Within the <body> Element Starting with HTML 5.2, the <style> element is now allowed in the document's body. However, the HTML specification advises the following: A style element should preferably be used in the head of the document.
As CSS is not document content, it should be in the head. Also every other Web developer will expect to see it there, so don't confuse things by putting it in the body, even if it works! The only CSS you should put in the body is inline CSS, though I usually avoid inline styles.
CSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods of including CSS in an HTML document: Inline styles — Using the style attribute in the HTML start tag. Embedded styles — Using the <style> element in the head section of a document.
Having style tags in the body is invalid code.
Every browser will try to use the invalid code in a way that makes sense. Some browsers seem to use the style rules anyway, but you can't rely on that being the behaviour of all current and future browsers. Another behaviour that would also make perfect sense would be to ignore the invalid style tag.
Note that even within the same browser the behaviour can differ depending on whether the page is rendered in standards compliance mode or quirks mode. In standards compliance mode (which is the preferred one) browsers tend to be more strict and ignore invalid code rather than try to guess what the author intended with the code.
In HTML5 you can use style tags in the body element. In any older browsers that are not aware of HTML5, or if you don't have a HTML5 doctype, it's still invalid code.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
