Calling Multiple External Css Files At Once To Html Page

I was wondering how I can call multiple external css files at once instead of calling each individually. I want to do that to avoid the request number and minimize it to one per mu

Solution 1:

Two options.

1. Css @import

@import url(stylesheet.css);

See documentation.

NOTE!: The browser actually does make multiple calls here, it is just hidden from the HTML

2. PHP

Use minify to shrink, cache, and combine your CSS/JS files.

Here is a minify tutorial

Here is a list of more compression tools.

Solution 2:

In order to do what you're doing, you are going to need some kind of server side script that combines.

Alternatively, just combine them all manually or use something like grunt to combine them all.

Solution 3:

Once you have sorted out all the CSS rules and you are ready to go into production, you should combine all your CSS files into a single file and then minify it.

You can then link to a single file from your pages.

As a start, read the previous question, it has some useful references:

Any recommendations for a CSS minifier?

Solution 4:

You can use the @import statement inside your 'master' css, to make it include multiple files at once. All you would have to do is link to your one master file in your HTML.

However, this will not limit your requests. As long as they are separate files, you will have to do separate requests.

For real performance improvement you would have to merge the files into one bigger file. There are some good tools out there. I prefer LESS, which is a precompiler that does lots more, but can also merge multiple files into one (minified) master css

Solution 5:

Even if you can minimize your html code to only one line, the client has to load them all individually 'cause they still are in different files on the server.

If you want to combine the Styles into one file just do it manually or on server-side.

Furthermore you could minify your CSS with an online tool to make the file's size smaller.