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.
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="2column-styles.css" media="screen and (min-width:1024px)">
</head>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:
<style>
@import url("/default-styles.css");
@import url("/wide-styles.css") screen and (min-width: 1024px);
/* Other styles */
</style>Source: Learning Web Design book.