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

Frequently Asked Questions CSS FAQ
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?

1 Like
3

yes, that is most certainly possible.

2 Likes
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.

5 Likes
6

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

7

Does separating HTML and CSS into separate files not do the opposite of “Seperation of concerns”, since it splits the code by code and not by concern?

8

html is the structure, css is the styling and position. That does sound as separation of concerns.

9

Concerns regard the content, not the language of the content. If someone is looking to change the code of a specific article, they have to go to 2 or 3 separate files using this method, as opposed to 1.

10

Depends what they want to change.

I have seen how large html and css files can get, trust me, you want to separate them. Plus you want to be able re-use the style in an effective manner. using inline css would lead to a lot of duplicate code.

11

How come in this exercise: Inline HTML to CSS-Step 2, the before linked css stylesheet to html page has the same result as after linking it in the header?