How media queries can be used to load external sheets?

Sometimes, we may want to load a full external stylesheet upon certain viewport or device conditions. In order to do so, we should include the media query in the link element.

	<link rel="stylesheet" href="styles.css">
	<link rel="stylesheet" href="2column-styles.css" media="screen and (min-width:1024px)">

This is useful but it triggers an extra HTTP request for each additional .css file.

We can also use @import rules to load external styles:

	@import url("/default-styles.css");
	@import url("/wide-styles.css") screen and (min-width: 1024px);
	/* Other styles */

Source: Learning Web Design book.