1

That's it. I've been hearing about CSS files a lot.
What are the main advantages of having a CSS file instead of writing the styles in the HTML code directly?

ZippingTheWorld
  • 33
  • 1
  • 4

6 Answers6

15

Assuming your site has 10 pages

  1. You don't have to repeat yourself 10 times.

  2. If your style changes, you don't have to do the change in 10 files

  3. Your HTML files are smaller

  4. Your CSS files can be cached

  5. You can reuse the style sheet on other sites you make

JohnP
  • 49,507
  • 13
  • 108
  • 140
  • 1
    Depending on what sites your working on point 1 could be: 1. You don't have to repeat yourself 7k to 10k times. – Damien May 02 '11 at 08:00
  • 2
    and different media stylesheets can be used, e.g. one for print, one for screen.. – clairesuzy May 02 '11 at 08:05
  • This may sound dumb. But the CSS acronym which expands to "Cascading Style Sheet" is quite understandable in some way. – Mon Noval May 05 '11 at 09:44
4

I'd add to JohnP's excellent answer by saying:

  1. you can separate out your caching on your page (where content may change regularly) to your CSS (where it may not) - sites are more likely to cache CSS for longer than they would the content of a page, separating it out will allow you to do this
  2. you can deliver your CSS from a content delivery network, potentially improving site performance
  3. you can 'minify' your CSS as part of a build process so that what you're developing on is readable/verbose, and what you deliver is small/terse, again as a means of improving performance
  4. once the content and presentation are separated out, your users will benefit from all of the above and you will get a faster page load.
Terry_Brown
  • 1,408
  • 10
  • 24
4

Please read this artical on Advantage of using external css.

Ariful Islam
  • 7,639
  • 7
  • 36
  • 54
3

There are a few advantages;

1) You can re-use the CSS in different pages across your site.

2) The download is separate for CSS when it is in a separate file, this is quicker.

3) The separate CSS file will be treated as static content and likely cached locally. Again quicker.

I personally find CSS easier to read and edit when it is in its own file.

iain
  • 1,693
  • 13
  • 19
  • 3
    Strictly speaking, I think point 2 is incorrect. Why would the download be quicker just because the CSS is in a separate file? This will result in two HTTP requests, which could actually be slower (you cannot be sure that the files are downloaded in parallel). But as you say in point 3, the CSS file can be cached as static content, which is good. – Anders Fjeldstad May 02 '11 at 08:02
  • Its actually slower since the browser has to create a whole new http request. – Gup3rSuR4c May 02 '11 at 08:04
  • there are many techniques that will make 2 true though - minifying the CSS, delivery from a content delivery network, and more aggressive caching will all potentially raise performance - no, they're not guaranteed, but I think folks would be mad to attempt inline CSS, even on a small site for all of the reasons spelled out in the answers here. – Terry_Brown May 02 '11 at 08:12
  • I think point 2 is still valid. The CSS reference will be in the head tag. While the HTML is getting streamed, the header reference will allow the CSS to be downloaded side by side (HTTP 1.1 allows 2 connections from 1 domain name). – iain May 02 '11 at 08:40
  • ahh, Iain do you have a reference for that? I thought it was a browser limitation (older browsers only allowing 2) rather than an HTTP spec limitation? From what I understood, modern browsers made > 2 connections per domain, whereas older browser (I'm looking at you IE6!) were limited to 2? – Terry_Brown May 02 '11 at 09:43
  • ahh, found a reference on here - http://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser - seems the spec has been ignored for some time now – Terry_Brown May 02 '11 at 09:46
  • however, http://msdn.microsoft.com/en-us/library/cc304129(v=vs.85).aspx it is not so true these days. but as a rule of thumb, if I am serving many files to load a page. I spread it to different domains. – iain May 02 '11 at 09:47
3

Some good answers by JohnP. However, the most important reason for me would be the separation of presentation and content.

Damien
  • 1,219
  • 13
  • 23
1

  1. Versioning becomes far easier as you have a central point to apply changes. The loading time of your site advances because you only deliver the stylecode ONCE and not with every html page you deliver. Furthermore you save up loading time as the css can be cached locally and so the site loads faster after first load, if there was no changes. This can also cause problems, see solution for those problems in point 2. you can also use different styles for different platforms or different tasks (such as braille or print) see available types here: Media types

  2. There are severe cache problems regarding Internet Explorer, you can give version numbers to keep the cached css out of order, if there were changes applied, so there is NO disadvantage of using css files but a HUGE advantage in administering the site. Example of versioning:

    <link rel="stylesheet" href="[path_to_css]/style.css?v=[date]" type="text/css">

So there are only huge advantages and no disadvantages of using css, so it is best practice.

kapa
  • 77,694
  • 21
  • 158
  • 175
Daniel
  • 49
  • 6