Controlling the load order of css files

Question

I'm loading a main.css file after the jquery ui css loads:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  <-- jQuery CSS
<link rel="stylesheet" type="text/css" href="CSS/jquery.Jcrop.css" />  <!-- not used here -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="CSS/main.css" />   <-- my main.css

This is the order I want because I overwrite some of the theme styles.

But in reality, the jQuery css loads after main.css because two transfers are forked:

How can I be sure that my main.css loads after the jQuery theme css?

Thanks

Answer 1

The order they are specified in the HTML file is the only thing that should count for the final result.

Either way: load your jQuery UI CSS from elsewhere, I don't think code.jquery.com is supposed to be used as a CDN.

That should bring down loading times massively. 2 seconds is way too much for a measly style sheet.

Answer 2

Also use the minified version if you append .min just before .css you will get the minfied version.

check it out..

http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.min.css

@pekka I think code.jquery can be used as a CDN on the jQuery website in the footer it says CDN: //code.jquery....

Answer 3

Sorry. It doesn't really take 2s to load the jquery css. I was reading the timeline wrong. Here's the correct image:

The jquery-ui.css is only 7.5KB so there's no difference really between the full and min version. All the time is in connecting and waiting.

When I finish developing the 750KB index.php code I'll minify and gzip it to get its time down.

Thanks for your help.