Comparison of loading CSS inline, embedded and from external files

Question

We can write CSS as the following types:

1. Inline CSS
2. Embedded CSS
3. External CSS

I would like to know pros and cons of each.

Answer 1

Inline CSS is generally bad. It's much easier to modify the style of a page when all the styles are located in one central location, which inline CSS doesn't offer. It's easy for quickly prototyping styles, but shouldn't be used in production, especailly since it often leads to duplicating styles.

Embedded CSS centralizes the styles for the page, but it doesn't allow you to share styles across pages without copying the text of the embedded style and pasting it in each unique page on your site.

External CSS is the way to go, it has all of the advantages of embedded CSS but it allows you to share styles accross multiple pages.

Answer 2

It's all about where in the pipeline you need the CSS as I see it.

1. inline css

Pros: Great for quick fixes/prototyping and simple tests without having to swap back and forth between the .css document and the actual HTML file.

Pros: Many email clients do NOT allow the use of external .css referencing because of possible spam/abuse. Embedding might help.

Cons: Fills up HTML space/takes bandwidth, not resuable accross pages - not even IFRAMES.

2. embedded css

Pros: Same as above regarding prototype, but easier to cut out of the final prototype and put into an external file when templates are done.

Cons: Some email clients do not allow styles in the [head] as the head-tags are removed by most webmail clients.

3. external css

Pros: Easy to maintain and reuse across websites with more than 1 page.

Pros: Cacheable = less bandwidth = faster page rendering after second page load

Pros: External files including .css can be hosted on CDN's and thereby making less requests the the firewall/webserver hosting the HTML pages (if on different hosts).

Pros: Compilable, you could automatically remove all of the unused space from the final build, just as jQuery has a developer version and a compressed version = faster download = faster user experience + less bandwidth use = faster internet! (we like!!!)

Cons: Normally removed from HTML mails = messy HTML layout.

Cons: Makes an extra HTTP request per file = more resources used in the Firewalls/routers.

I hope you could use some of this?

Answer 3

I'm going to submit the opinion that external style sheets are the only way to go.

• inline CSS mixes content with presentation and leads to an awful mess.

• embedded CSS gets loaded with every page request, changes cannot be shared across pages, and the content cannot be cached.

I have nothing against either method per se, but if planning a new site or application, you should plan for external style sheets.

Answer 4

Where to start!!??

Say you had a site with 3 pages... You could get away with Inline CSS (i.e. CSS on the page itself, within tags).

If you had a 100 page website... You wouldn't want to change the CSS on each page individually (or would you?!)... So including an external CSS sheet would be the nicer way to go.