Is adding CSS rules outside the Header possible?

Question

Possible Duplicate:
Declare CSS style outside the “HEAD” element of an “HTML” page ?

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

I want to do this ...

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

I could add the style rules "inline" inside the element but I wanted to avoid this if possible since the 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>

See also http://stackoverflow.com/questions/1362039/style-and-script-tags-in-html-body-why-not#1362192 — Paul D. Waite, Mar 09 '11 at 20:38
Every serious CMS gives you some way to insert data in the tag. What CMS are you using ? There could be a specific answer to your problem, that could lead to a valid page too — Riccardo Galli, Mar 09 '11 at 21:14

score 5 · Accepted Answer · edited May 23 '17 at 12:18

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

Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

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

It works just fine in browsers though. 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>

Patrick Fisher · Answer 2 · 2011-03-09T20:47:29.960

3

Yes. You can use a <style> element.

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

<div class="redOutline">content</div>

edited Mar 09 '11 at 20:47

answered Mar 09 '11 at 20:34

Patrick Fisher

7,926
5
35
28

I hope you don't mind that I added to the specifics. – zzzzBov Mar 09 '11 at 20:36
@Patrick Fisher, it's not true unless you specify the version of HTML. – zzzzBov Mar 09 '11 at 20:40
@zzzzBov: I'm not 100% sure, but I don't think having a ` – thirtydot Mar 09 '11 at 20:41
It is broadly supported by browsers and is HTML5 compliant. – Patrick Fisher Mar 09 '11 at 20:42
1

@thirtydot, read my answer in the duplicate, [it's valid for HTML5](http://dev.w3.org/html5/spec/semantics.html#the-style-element). – zzzzBov Mar 09 '11 at 20:42
@zzzzBov: Nice, I wasn't aware of that. Looks a bit annoying to use though (can only style elements within the parent element of the ` – thirtydot Mar 09 '11 at 20:45
Apparently, the `scoped` attribute is required for strict compliance with the HTML5 spec, and it must be placed before all flow content within that scope. – Patrick Fisher Mar 09 '11 at 20:47
@zzzzBov - Where would you need to define the docType? Keep in mind I do not have access to the header as I am contained within a CMS. – webworm Mar 09 '11 at 21:09
@webworm doctype needs to go before the header. You'd need to make sure that your Theme/View/Style for the CMS uses HTML5 (` `), otherwise you'll be forced to use inline styles, scripts or invalid markup. – zzzzBov Mar 09 '11 at 21:17
1

Invalid markup isn't the end of the world, though. What really matters is browser support. http://validator.w3.org/check?uri=http://www.google.com – Patrick Fisher Mar 09 '11 at 21:28
This should be the checked answer – Benjamin Intal Apr 28 '12 at 07:54

Oded · Answer 3 · 2011-03-09T20:42:22.333

This is not valid HTML, according to the spec.

In the DTD, the STYLE element appears like this:

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

Where the head.misc only appears as pard of HEAD or TITLE.

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

score 2 · Answer 4 · edited May 23 '17 at 11:55

2

Answered before :)

But in short, they are invalid but many sites add them to the body, especially those built by (bad) Content Management Systems.

edited May 23 '17 at 11:55

Community

1
1

answered Mar 09 '11 at 20:37

andyb

43,435
12
121
150

Is adding CSS rules outside the Header possible?

4 Answers4

Linked

Related