Problem
<html>
<body>
<style type="text/css">
p.first {color:blue}
p.second {color:green}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
<style type="text/css">
p.first {color:green}
p.second {color:blue}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
</body>
</html>
How is non-contiguous CSS expected to be rendered by a browser? Is it expected to create a data structure from all of the CSS styles on a page and use it for rendering?
Or does it render based on the sequence in which it encounters style information?
Asked by Gagan
Solution #1
HTML 4 requires the style> tag to be placed in the head> part (even though most browsers allow style> tags to be placed in the body). As others have stated, HTML 4 requires the style> tag to be placed in the head> section (even though most browsers allow style> tags to be placed in the body).
However, HTML 5 includes the scoped attribute (see update below), which allows you to create style sheets that are scoped within the parent element of the