Why should I use an external stylesheet instead of inline CSS?


#1

Question

Why should I use an external stylesheet instead of inline CSS?

Answer

External stylesheets:

  • use the principle of separation of concerns, this makes both the HTML and CSS easier to read and more organized
  • can be used on multiple HTML documents without having to rewrite CSS declarations
  • allow global styles to be changed easily, new changes will be applied to the entire HTML document the external CSS is used on

vs

Inline CSS:

  • styles will have to be applied individually to HTML elements, and do not use the principle of separation of concerns, this makes both the HTML and CSS harder to read/disorganized
  • styles cannot be used on multiple HTML pages - styles have to be rewritten for each page
  • styles are not global, if a change is needed for a particular style it will need to be changed on the element itself

#2

Can you use a mixture of inline and external CSS?


#3

yes, that is most certainly possible.


#4

Thanks for the reply, but in which case would one do that. If you could give a brief example that would be wonderful. Thanks again!


#5

You asked if its possible. Yes, it is. Should you do this? No, preferable not. Generally its preferred to use external stylesheet only because of all the pros listed in the answer of this FAQ.

There are exceptions of course, JS can only modify inline style, so if you use JS to toggle (hide/display) the dropdown/hamburger menu, some inline style is justified.


#6

Thanks for such an extensive and well crafted explanation!! Much appreciated!