I have always been taught to have all of the CSS in a separate file that is referenced from the head of the page. Reading this article, the author is talking about making the Guardian website responsive. One of the things he notes they did to make the site faster and more resilient is to add the CSS inline into the header, thus reducing HTTP requests.

Now this got me thinking about the right/best/fastest way of using the CSS

If you have one main CSS file, its going to be called and read by the site on every page, no mater how big it is. So with that in mind, I'm actually starting to think its better to just inline the whole style sheet and remove one HTTP roundtrip.

I know for the purposes of neatness and being able to edit the file a separate file is better.

But which would you recommend and which do you think is faster?

2 Answers 2


Without actually reading their article I can say their logic is flawed. CSS files are requested once and than cached by the browser (unless you intentionally block this behavior). The result is only one extra HTTP request to get the CSS file (which should be fast if you are compressing your content). Then all of the other pages load faster because the client doesn't have to download all of that CSS over and over again.

  • 2
    Yep to extend on Johns answer, basically imagine you had hundreds of lines of CSS code inline with in header of your site and this information alone weighed in at 10KB... now the problem arises is when the user navigates to another page, they will need to download the same 10KB twice on PageB because its not cached. While using a CSS file going from pageA to pageB you would not download the file again saving bandwidth and render time. Sep 20, 2013 at 22:01
  • +1 Caching can benefit all your pages. Instead you could use a CSS compressor like this one, or add gzip to compress everything.
    – dan
    Sep 21, 2013 at 4:35
  • Brilliant. I never thought about the second page issues so thanks for setting me straight. Sep 21, 2013 at 15:20
  • It should be noted there are occasions when putting some CSS inline is beneficial - for example if the rules apply only to that page and will not be used anywhere else. Sep 22, 2013 at 14:23

For best practices, external CSS is good but if you have both inline and external CSS applied to a same page then inline CSS will get the priority. The priority of CSS is as following:

  1. inline CSS
  2. CSS in header
  3. external CSS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.