css: how to combine multiple stylesheets into one

Question

Does anyone know on how to combine multiple stylesheets into one? For example I have

<         


        

Answer 1

You can combine your css files using YUI Compresser, that combines CSS and minimizes code and is good for performance.

Take a look here, for Combining CSS files into one.

Answer 2

Basically, you can keep them like that. As long as your stylesheets don't have elements redefined from one to another, you will have no problems. For example, if you have 2 stylesheets a.css and b.css in your htm file

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

if in a.css you have

a{
text-decoration:none;
}

and in b.css

a{
text-decoration:underline;
}

then the second linked stylesheet will define the text-decoration attribute of a

Answer 3

@import is not recommended... The largest problem is that it causes files to load sequentially (one has to wait for the other) instead of in parallel (at the same time). This wastes times and round trips and makes your web page load slower.

[http://www.feedthebot.com/pagespeed/avoid-css-import.html][1]

[1]: http://www.feedthebot.com/pagespeed/avoid-css-import.html you can read it here...

Answer 4

You could group them with title attribute. Try to give a title attribute like title="myStyle"

Answer 5

Hi you can achieive your desired results through import option......

The easier way to apply multiple files is to use the "@import" rule (browser support dependent).

<style type="text/css" media="all">
  @import url("/css/a.css");
  @import url("/css/b.css");
  @import url("/css/c.css");
</style>

you can read more about Using @import for multiple Style Sheets

Answer 6

How about copying the content of the files into one?