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

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