CODEWITHSUNDEEP
htmlcss
ZippingTheWorld
ZippingTheWorld

Reputation: 33

Why is it necessary a CSS file when we can declare the styles in the HTML code?

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?

Upvotes: 1

Views: 921

Answers (6)

Daniel
Daniel

Reputation: 49

  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.

Upvotes: 1

Ariful Islam
Ariful Islam

Reputation: 7675

Please read this artical on Advantage of using external css.

Upvotes: 4

Terry_Brown
Terry_Brown

Reputation: 1408

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.

Upvotes: 4

Damien
Damien

Reputation: 1217

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

Upvotes: 3

iain
iain

Reputation: 1935

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.

Upvotes: 3

JohnP
JohnP

Reputation: 50029

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

Upvotes: 15

Related Questions