2

I have an old website where about 70 percent webpages have css style sheet inside the body tag. 

<body>
<style>
h2 {color:red;}
</style>

<h2> Hello Ladies & Gentelmen</h2>

</body>

As you can see ,the CSS is inside the body of the document.

I have tested these webpages with diffrent web browsers including (Opera, Chrome,IE etc) , They are working fine and there is no problem with the CSS.

So now my question is :-

Is body the right place for CSS or Should I always put the CSS in head section of my webpage?

Amit Verma
  • 40,709
  • 21
  • 93
  • 115
  • 1
    Put CSS as an external file. It can be shared amongst multiple pages. One file change can "freshen" your web site – Ed Heal Jul 11 '15 at 11:33
  • I put CSS in the head section if not in a separate file based on codecademy training and have found it all works better with CSS and JavaScript in separate files. Plus if there are separate files for CSS and JavaScript for a website then users only download them once and not for each web page and it can make website management easier especially if there are dedicated JavaScript and CSS specialists. –  Jul 11 '15 at 12:13

5 Answers5

1

You should always put any css, whether inline, or external, in the <head> of your website.

The reason the websites work as normal is because the modern browsers realize that sometimes people put css in the body, and they automatically correct the mistake. It it were an older browser you may not get so lucky.

Blake
  • 561
  • 5
  • 14
  • 1
    Furthermore, there is rarely good reason to have CSS in the HTML document at all. It should be its own separate file, and brought in via a [`link`](https://developer.mozilla.org/en/docs/Web/HTML/Element/link) tag. – Dave Salomon Jul 11 '15 at 11:37
  • 1
    I agree with @DaveSalomon , always have your css in an external stylesheet whenever possible. It makes for cleaner code, and easier maintenance. – Blake Jul 11 '15 at 11:40
  • ... And you can do tricks if it is a mobile device/tablet. Also if the user has a cookie that they have a visual impairment – Ed Heal Jul 11 '15 at 11:46
1

Even though most (if not all) browsers allow the style element as a descendant of body, it is invalid HTML.

The style element is "Metadata content": http://www.w3.org/TR/html5/document-metadata.html#the-style-element

The body element should contain only "Flow content": http://www.w3.org/TR/html5/sections.html#the-body-element

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
1

A <style> element's being inside <body> is invalid HTML, although some browsers are able to correct it because it's a common mistake. It belongs in the <head> element because it is metadata. I, however, usually prefer to use linked stylesheets because the browser can cache them for better performance.

1

Originaly was ok, but that change along time ago, if you put the style in the middle of the body, the browser gonna render the first half without styles, ugly right... and then has to repaint all... so, two things, that was slow, that blinks (givin the sensation of slow or wrong).. because that we put styles on header. That was the reason. Then, the standard adopt putting style in the header like the way to do things. So, if you put styles in the body, its an invalid html.

Hope it helps.

One thing more, you can have the file css... and that would be cached by the browser. You have style tag and inline style... the priority is, inline, then tag then the file.

Lucas Tettamanti
  • 1,360
  • 8
  • 10
-1

As my point of view i prefer puting css in <head> tag and jquery at the bottom of page. And external css is most preferable for reuse class in different pages.

Karan Patel
  • 2,219
  • 3
  • 19
  • 32
  • So having an ugly page is preferable for the user to wait a second or two. Besides why require the page to be rendered twice. – Ed Heal Jul 11 '15 at 11:37
  • basic required css should put at head tag...and some extra animation css should put at bottom.. – Karan Patel Jul 11 '15 at 11:39
  • No. It is ASCII so will at most be 2/3 IP packets. Why waste the TCP/IP set up of a connection# – Ed Heal Jul 11 '15 at 11:42
  • When talking about best practices, references help. I can understand why JS libraries are loaded at the bottom, they tend to come into play when DOM is ready. CSS, on the other hand, is needed way before to render the DOM properly on the first pass. Reference: [Bootstrap](http://getbootstrap.com/). – D-side Jul 11 '15 at 12:21
  • Thanks for correcting me..i got your point..so css should put at head tag and must be external for re-usability.. – Karan Patel Jul 13 '15 at 04:41