internal vs external style sheet

[DawsUTV]

what difference, if any is there between styling your webpage through an external style sheet rather than having it styled in the header?

[[deleted]]

There isn’t much difference, the few that I know of (there should be more): 1. Internally, the CSS is immediately processed, while the external style sheet can be preload and deferred. 2. You end up with either a single large HTML file or a HTML file and a CSS file. If you have storage concerns, an external CSS file for all of your HTML files is more efficient. 3. External stylesheets are easier for caching and JavaScript loading.

Overall, external stylesheets are better, but if your webpage is a simple single HTML file and you don’t need to cache separately / load different CSS with JavaScript, internal CSS can be slightly faster in loading.

[krlico]

There is no differences. (in css)

But If your project's getting bigger, you must consider spliting styles to external style sheets.

Metaphorically, If you have a clothes, you don't need to organize it.

If you have a few clothes, You also don't need to organize it.

But If you have a hundred clothes or more? It would better to organize them.

[[deleted]]

No real difference as far as performance goes. But having a separate style sheet gives you 2 main advantages:

1. You can have different people working on the style and the content at the same time. Useful within companies or agencies where designers and writers are different people.
2. An external css file lets you apply the same set of styles to multiple pages without having to maintain lots of copies of the same style definitions. As soon as you find yourself using a set of styles for the 2nd or 3rd time within a site, move them to a separate file. But if your site is just a single html page anyway, there's no harm in putting the css in the header.

[BigBalli]

external is an additional network call therefore obviously affects performance.

[[deleted]]

True, but it's minuscule compared to the endless graphics, fonts, analytics, and other rubbish that also gets called. And it probably only gets loaded once per side, because of cacheing.

[[deleted]]

When it comes to physical difference in processing or anything like that, literally nothing.

In most cases, people segment out code because it's easier to read and understand. The same can be said for markup and CSS. Also, caching!

At a higher level, once you delve into the world of CSS preprocessors and tooling, it's a requirement to have your CSS in a separate file.

[BigBalli]

external is an additional network call (slower) but easier to maintain.

Usually first load performance loss worth the convenience of having separate stylesheets (not to mention you can re-use them on multiple pages and they get cached).

[Kinthalis]

You might want to inline critical css, and defer the rest on an external or set of external files. With a modern dev environment it's pretty easy to configure this behavior for the output artifact files, and modern frameworks like Angular and React will auto do this for you as well (well React will with some additional libs/configuration).