2

i am trying to add up all the css link to one. So it helps to load the page much quicker.

the links i am using are:

<link rel="stylesheet" href="index_files/stylesheet.css" type="text/css">
<link rel="stylesheet" href="/index_files/goStyle.css" type="text/css"/>
<link rel="stylesheet" href="/index_files/jquerylogin.css" type="text/css">
<link rel="stylesheet" href="/index_files/jquery-ui.css">

As of research, suggestion are to combine all the css to one file, but i am having problem with same class name affecting different label.

I tried adding the link like:

<link rel="stylesheet" href="index_files/stylesheet.css+goStyle.css+jquerylogin.css+jquery-ui.css" type="text/css">

But no luck.

Please somebody help me with this.

Anthony
  • 36,459
  • 25
  • 97
  • 163
Target
  • 199
  • 4
  • 19
  • 1
    Unless your css files are gigantic or your hosting server is exceptionally slow, it is unlikely that combining the stylesheets will have the payoff you're expecting. If caching is properly set up, the page load should be 0 after the initial visit. – Anthony Apr 30 '14 at 05:41
  • 1
    The performance benefits you're asking for aren't a product of the number of links involved, but the number of files being requested. If you want to have only 1 HTTP request, then you have to serve only 1 file to the user. – cimmanon Apr 30 '14 at 12:05
  • 1
    possible duplicate of [Combine and Minify Multiple CSS / JS Files](http://stackoverflow.com/questions/9287823/combine-and-minify-multiple-css-js-files) – cimmanon Apr 30 '14 at 12:06

3 Answers3

0

Please read this page: Combine and Minify Multiple CSS / JS Files

Check out minify - it allows you combine multiple js, css files into one just by stacking them into a url, e.g.

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

We've used it for years and it does a great job and does it on the fly (no need to edit files).

Community
  • 1
  • 1
Snake Eyes
  • 16,287
  • 34
  • 113
  • 221
0

If you combine all CSS into one CSS in same sequence, it will have same effect like including separately.

Combine all the CSS files in same sequence like :

/* stylesheet.css */

/*### stylesheet CSS Goes Here ###*/

/* goStyle.css */

/*### goStyle CSS Goes Here ###*/

/* jquerylogin.css */

/*### jquerylogin CSS Goes Here ###*/

/* jquery-ui */

/*### jquery-ui CSS Goes Here ###*/
theHarsh
  • 660
  • 5
  • 8
-2

Use CSS Import Rules

<link rel="stylesheet" type="text/css" href="/css/Combined.css" />

Combined Css Inside you can import all other css like below

@import url('/css/s1.css');
@import url('/css/s2.css');
@import url('/css/s3.css');

for more information read below article

http://www.cssnewbie.com/css-import-rule/#.U2CN9Pk70dE

Anand Thangappan
  • 3,068
  • 2
  • 28
  • 31
  • 1
    This won't accomplish what the OP is asking for. This still makes the same number of HTTP requests, but has worse performance (see: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/). – cimmanon Apr 30 '14 at 11:02