Internal vs external css

There are two ways to include a css on a site. In case you are using a wordpress site, many plugins involving frontend ui element have a css file which gets included externally. I’ll use wordpress as context for this article but this article is relevant to any site.
internal-vs-external-css

Internal css

Internal css can be included on a page using html similar to the following code between <head> and </head> tags:

<style type="text/css">
  h1,h2,h3,h4,h5,h6 {font-family: Georgia, Times new Roman, serif;}
</style>

External css

External css can be included on a site using the html similar to the following code between <head> and </head> tag:

<link rel='stylesheet' href='/path/to/file.css' type='text/css' media='all' />

The href can either be complete url with same of different domain (e.g. http://somedomain.com//path/to/file.css) or current domain relative url (e.g. /path/to/file.css).

Comparison of external and internal css

Here are few things you may want to consider before deciding if some css chunk should go in external file or internal css in page itself:

Css caching

External css gets cached (assuming you are using right http expire headers). It eats some cache space of browser though. It is not such a big concern but something worth keeping in mind with mobiles becoming prominent. In case you have lots of repeat activities by same user, then you get lot of benefit from external css file caching. With css caching, when same user visits a page with shared external css, that css gets loaded from browser cache.

DNS lookup and extra round trip

External cache causes extra roundtrip and potentially one extra DNS lookup. This causes some latency at user end.

Css fetching and page rendering

The page rendering also gets blocked till all external css files have been fetched.

Recommendation

If you do not have many repeat visits by same user, its a good idea to avoid too many external css files. For small css files, its best to put them in internal css. You can also use Google page speed to detect such css files.

How to use internal css in wordpress

In case you already have a plugin you can piggy back that plugin of write a new one. Here is the code you can use to include internal css in wordpress:

function my_style_inline() {
  $content = file_get_contents(ABSPATH . 'wp-content/plugins/PLUGINNAME/CSSFILENAME.css');
  echo '<style type="text/css">' . "\n";
  echo $content;
  echo "</style>\n";
}
add_action('wp_head', 'my_style_inline');

In case you want to dequeue some already queued css, you can use the following code:

function my_style_dequeue () {
  wp_dequeue_style('stylename_used_by_enqueue');
}
// 1001 or some value high enough to ensure dequeue happens after enqueue
add_action('wp_enqueue_scripts', 'my_style_dequeue', 1001);