[ACCEPTED]-Internal vs External CSS-httpwebrequest

Accepted answer
Score: 14

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

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

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

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

Advantage of combining with Cache expiry settings: "Look and feel" of 10 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 9 you put styles in external CSS file and 8 set a cache expiry of say 1 month, then 7 during this time all users will have very 6 low 'start' delays because only the content 5 that has changed will be downloaded: the 4 styles will be reused from your browser 3 cache. The browser will request a refresh 2 automatically the first time someone tries 1 to access your page after the expiry date.

Score: 10

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

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

Score: 1

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

Score: 1

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

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

More Related questions