Is adding CSS rules outside the Header possible? [duplicate]

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>

Every serious CMS gives you some way to insert data in the <head> 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
– Riccardo Galli, Commented Mar 9, 2011 at 21:14

Community · Accepted Answer · 2017-05-23 12:18:27Z

5

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>

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Mar 9, 2011 at 20:35

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Patrick Fisher · Accepted Answer · 2011-03-09 20:47:29Z

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 9, 2011 at 20:47

answered Mar 9, 2011 at 20:34

Patrick Fisher

8,0725 gold badges38 silver badges28 bronze badges

11 Comments

zzzzBov Over a year ago

I hope you don't mind that I added to the specifics.

zzzzBov Over a year ago

@Patrick Fisher, it's not true unless you specify the version of HTML.

thirtydot Over a year ago

@zzzzBov: I'm not 100% sure, but I don't think having a <style> element within the <body> is valid for any commonly used doctype.

zzzzBov Over a year ago

@thirtydot, read my answer in the duplicate, it's valid for HTML5.

Patrick Fisher Over a year ago

Invalid markup isn't the end of the world, though. What really matters is browser support. validator.w3.org/check?uri=http://www.google.com

|

Community · Accepted Answer · 2017-05-23 11:55:03Z

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, 2017 at 11:55

CommunityBot

11 silver badge

answered Mar 9, 2011 at 20:37

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Comments

Oded · Accepted Answer · 2011-03-09 20:42:22Z

2

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.

edited Mar 9, 2011 at 20:42

answered Mar 9, 2011 at 20:35

Oded

501k102 gold badges900 silver badges1k bronze badges

Collectives™ on Stack Overflow

Is adding CSS rules outside the Header possible? [duplicate]

4 Answers 4

Comments

11 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

11 Comments

Comments

Comments

Linked

Related