title: How to combine multiple CSS into one
body: <p>In an HTML file i have got the following css files . </p>
  
  <pre><code> &lt;link href=style.css rel=stylesheet&gt;
  &lt;link href="css/responsive.css" rel=stylesheet&gt;
  &lt;link href="css/custom.css" rel=stylesheet&gt;
  &lt;link href='css/fonts.css' rel=stylesheet type='text/css'&gt;
  &lt;link rel="shortcut icon" href=""&gt;
  &lt;link href="css/jquery-ui.css" rel=stylesheet&gt;
  </code></pre>
  
  <p>When i run the gtmetrics tool for page optimization it says that </p>
  
  <p>This page has 7 external stylesheets. Try combining them into one.</p>
  
  <p>I tried combing them into one as</p>
  
  <pre><code>&lt;link  type="text/css" href="reset.css,css/style.css,css/responsive.css,css/custom.css,css/fonts.css,css/jquery-ui.css" rel=stylesheet&gt;
  </code></pre>
  
  <p>but the css didn't loaded , please let me know how to combine them into one.</p>