Internal vs External CSS

Question

Hi,

What's the pro's and con's on Internal vs External CSS, thinking of speed, requests, caching etc..? Personally I'm not sure if internal css on dynamic pages will cache..?

Answer 1

No, they will not. External CSS can be cached across multiple pages/requests, moreover you can typically compress these files using gzip.

Answer 2

If the page is cachable, the internal CSS for this page is also cachable (as it is part of the page). But external stylesheets have the advantage that they can be used for many pages and are only requested once when cachable.

Therefor you first have an additional request (the external stylesheet) but then less data to transfer on further requests.

Answer 3

Pros for internal CSS: - faster downloads: remember that there will be one additional HTTP request for each external style sheet you have

Pros for external CSS: - it is common for websites to have common 'theme' across all its pages. You can club all such common styles in external file and with one download you get the required style that can be used in multiple pages: saves download time - you can also cache external styles and set an appropriate expiry date.

One thing against for internal CSS is that it can increase the download size of the html.

Best approach: - use mix of internal + external styles depending on which styles are used in diff pages - make sure to set expiry settings on external styles and cache them.

Advantage of combining with Cache expiry settings: "Look and feel" of web apps is governed by the following:

• you typically want to maintain same 'feel' across all pages
• the content is more likely to change frequently than the styling

If you put styles in external CSS file and set a cache expiry of say 1 month, then during this time all users will have very low 'start' delays because only the content that has changed will be downloaded: the styles will be reused from your browser cache. The browser will request a refresh automatically the first time someone tries to access your page after the expiry date.

Answer 4

Using external CSS ensures the look of all your pages is consistent, at least if you use 1 CSS file for the whole site. There may be a speed penalty for the first page, but from then on the CSS file is cached, and as a result subsequent pages will actually load faster.

I do occasionally use internal CSS where it's very specific to the page, and of no use elsewhere. Never place them in-line though; in-line CSS is very hard to maintain.