ansaurus

Question

Using <style> tags in the <body> with other HTML

Answer 1

+9 A:

The <style> tag belongs in the <head> section, seperate from all the content.

References: W3C Specs and W3Schools

Side note: Where is your DOCTYPE?!

Josh Stodola 2010-05-13 21:05:18

Answer 2

+7 A:

I guess this will vary from browser to browser: The global display rules will probably be updated as the browser goes along through the code.

You can see such changes in the global display rules sometimes when an external style sheet is loaded with a delay. Something similar might happen here but in such short succession that it doesn't actually get rendered.

It's not valid HTML anyway, so I'd say that it is a futile thing to think about. <style> tags belong in the head section of the page.

Pekka 2010-05-13 21:05:41

Answer 3

+4 A:

In your example, a browser isn't "supposed" to do anything. The HTML is invalid. Either error recovery is triggered, or the parser makes of it as it will.

In a valid instance, multiple stylesheets are just treated as appearing one after the other, the cascade is calculated as normal.

David Dorward 2010-05-13 21:06:50

Answer 4

A:

As others have said, this isn't valid html as the style tags belong in the head.

However, most browsers dont' really enforce that validation. Instead, once the document is loaded then the styles are merged and applied. In this case the second set of styles will always override the first because they were the last definitions encountered.

Chris Lively 2010-05-13 21:12:17

Answer 5

+1 A:

Not valid HTML, anyway pretty much every browser seems to consider just the second instance.

Tested under the last versions of FF and Google Chrome under Fedora, and FF, Opera, IE, and Chrome under XP.

nico 2010-05-13 21:13:42

Answer 6

A:

Because this is HTML is not valid does not have any affect on the outcome ... it just means that the HTML does adhere to the standard (merely for organizational purposes). For the sake of being valid it could have been written this way:

<html>
<head>
<style type="text/css">
  p.first {color:blue}
  p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>

My guess is that the browser applies the last style it comes across.

G. Bickham 2010-05-13 22:06:12

ansaurus

tags:

views:

answers:

Using <style> tags in the <body> with other HTML

related questions