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

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?