All geek questions in one place

Is adding CSS rules outside the header?

Possible duplicate:
Declare a CSS style outside of the "HEAD" element in the "HTML" page?

I am creating some content that is used inside the CMS, where I do not have access to the title tag. Is there a way to add CSS rules to a <BODY> document?

I want to do this ...

 .ClassName { border: 2px solid red; margin: 5px; padding: 5px; }

I can add inline style rules inside an element, but I wanted to avoid this if possible, since CSS rules will be used in many elements.

I want to avoid this ...

 <div style="border: 2px solid red; margin: 5px; padding: 5px">content</div>
+4
source share
4 answers

You can add <style> inside the body , but you get a validation error :

An element style is not allowed as a child of an element body in this context. (Suppression of further errors from this subtree.)

(This is because it is not allowed according to the specifications, see @Oded answer )

It works very well in browsers. Browsers do not care:

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <style type="text/css"> .ClassName { border: 2px solid red; margin: 5px; padding: 5px; } </style> <div class="ClassName">content</div> </body> </html>
+5
source

Yes. You can use the <style> element.

 <style type="text/css" scoped> .redOutline { border: 2px solid red; margin: 5px; padding: 5px; } </style> <div class="redOutline">content</div>
+3
source

This is invalid HTML, as per specification .

In a DTD, the STYLE element is as follows:

 <!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

Where head.misc displayed only as pard HEAD or TITLE .

However, as others have noted, many browsers will still parse and use stylesheets that have been defined in body tags. Your mileage may vary ... in particular if you use DOCTYPE in your markup.

+2
source

Answered to :)

But, in short, they are invalid, but many sites add them to the body, especially those created by (bad) content management systems.

+2
source

Source: https://habr.com/ru/post/1343075/

More articles:


All Articles