calling multiple external css files at once to html page

Question

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 multiple external css files.

I tired the following, but didn't work!!

<link rel="stylesheet" href=" http://statics.mydomain.co/style.css,functionstyle.css,widgets.css,edges.css,options.css,tags.css" type="text/css">

I thought it is a lot easier than that!!

any idea what I'm missing here!!!

What is the idea behind one request? Shouldn't you instead consider consolidating the style-sheet if that is all you want? — Learner
– Learner, Commented Jul 2, 2013 at 18:27
@Learner From a development standpoint, breaking up the style sheets based on what component they control is easier. However, for performance reasons, a single style sheet is better as the number of requests that can be made at once is limited (more style sheets = less other stuff that can be downloading at the same time). — cimmanon
– cimmanon, Commented Jul 2, 2013 at 18:29
The thing is that some styles I use in different pages so I want to include some css to an html page and different ones to other pages... — Digital site
– Digital site, Commented Jul 2, 2013 at 18:29

Dan Grahn · Accepted Answer · 2013-07-02 18:27:14Z

2

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.

edited Jul 2, 2013 at 18:27

answered Jul 2, 2013 at 18:22

Dan Grahn

9,4446 gold badges41 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Digital site Over a year ago

good point, but would combining all css files to one make things worse on the page load for example since the size matter to browser upload vs time...!!

Dan Grahn Over a year ago

@Digitalsite I'm not sure what you're asking, but minifying is a pretty standard production procedure. Generally it's done once and stored as a static css file.

kalley · Accepted Answer · 2013-07-02 18:20:31Z

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.

answered Jul 2, 2013 at 18:20

kalley

18.5k2 gold badges41 silver badges37 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:33:35Z

1

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?

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jul 2, 2013 at 18:21

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Comments

Pevara · Accepted Answer · 2013-07-02 18:22:04Z

1

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

answered Jul 2, 2013 at 18:22

Pevara

14.3k1 gold badge37 silver badges48 bronze badges

2 Comments

cimmanon Over a year ago

The @import statement in CSS does not avoid making multiple HTTP requests, which the OP specifically wants to avoid. In fact, using @import is arguably worse than including them individually via <link rel="..." />.

Pevara Over a year ago

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

Atrox111 · Accepted Answer · 2013-07-02 18:22:51Z

1

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.

answered Jul 2, 2013 at 18:22

Atrox111

5274 silver badges17 bronze badges

Collectives™ on Stack Overflow

calling multiple external css files at once to html page

5 Answers 5

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related