Question

What’s the pros and cons 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

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.