Comparison of loading CSS inline, embedded and from external files.

Question

We can write CSS as following types:

    1. inline css
    2. embedded css
    3. external css

I would like to know pros and cons of each. Thanks everyone.

Regards, thlaing

Answer 1

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 2

Inline

Quick, but very dirty

This is (sadly) also the only really sane option for HTML formatted email as other forms often get discarded by various email clients.

Embedded

Doesn't require an extra HTTP request, but doesn't have the benefits of:

Linked

Can be cached, reused between pages, more easily tested with validators.

Answer 3

You want external css. It's the easiest to maintain, external css also simplifies caching. Embedded means that each separate html file will need to have it's own css, meaning bigger file size and lots of headaches when changing the css. Inline css is even harder to maintain.

External css is the way to go.

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.

Answer 5

Use external CSS when:

• you have a lot of css code that will make your file messy if you put it all inline
• you want to maintain a standard look-and-feel across multiple pages

External CSS makes it a lot easier to manage your CSS and is the accepted way of implementing styles.

If the styles are only needed for one file, and you don't foresee that ever changing to apply to other pages, you can put your css at the top of the file (embedded?).

You should generally only use inline CSS if:

• It's a one-time formatting for a specific tag
• You want to override the default css (set externally or at the top of the file) for a specific tag

Answer 6

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 7

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 forth and back between .css document and the actual HTML file.

Pros: many email clients does 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 does not allow styles in the [head] as the head-tags is remove 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 automated this so remove all the unsused 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 pr. file = more ressources used in the Firewalls/routeres

I hope you could use some of this?