External Style Sheets are Faster Than Embedded and Inline Style Sheets
External style sheets — style sheets written in a separate document and either linked or imported into the web page — are faster than inline style sheets (e.g. <p style="color: red;">) or embedded style sheets (e.g. style sheets in the <head> of the document inside a <style> tag). This is because as soon as that style sheet is loaded by the browser, it doesn't need to be loaded again for that session. So after the first load, the style sheet is cached and the browser can load subsequent pages more quickly.
Also, external style sheets are fewer bites that need to be downloaded for the web page document itself. A style sheet that has 5-10 style properties in it is going to be much longer than a linked style sheet call like <link rel="stylesheet" type="text/css" href="styles.css" />
But You Should Only Use One External Style Sheet
External style sheets are an important skill for web designers to know how to use. If you don't know how to build and use an external style sheet you should learn, so that your site is more efficient.
But a common mistake people make is to create multiple style sheets for different aspects of the site. Even I have been guilty of suggesting this practice. I have seen websites with 5-10 external style sheets linked for all types of things, from the layout styles, font styles, styles for different sections, and so on.
Every Style Sheet You Link to is Another HTTP Request
Every HTTP request your web page makes to the server causes a hit in the download time. In order to improve speed and performance, you should minimize the number of HTTP requests your web pages make. And this can affect the speed at which your pages load.
By combining your multiple CSS files into one file, you reduce the HTTP requests and create one big document that can be cached and speed up every other page that uses it as well.
But Won't the File Get Too Long?
It is conceivably possible that a CSS file could get too long and end up slowing down the page it's attached to more than multiple HTTP requests would. But remember that CSS is text, and text is generally small. So if you have a CSS file that is several hundred KB in size, you should consider evaluating it to see if there are styles you can combine and then look at minifying it to remove comments and extraneous white space.
