CSS Media Queries: Conditional loading of media-dependent style sheets

CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For e.g., you could have a stylesheet only display for screen devices with a maximum screen width of 480px (i.e. a mobile device) using following CSS Media Query, bolded below:<link rel="stylesheet" type="text/css" media="screen and (max-device-width: […]

CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For e.g., you could have a stylesheet only display for screen devices with a maximum screen width of 480px (i.e. a mobile device) using following CSS Media Query, bolded below:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

You can compose complex media queries using logical operators, including not, and, and only. In addition, you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This's the equivalent of a logical "or" operation. The not keyword negates the result of the query; "all and (not color)" is true for monochrome devices regardless of media type, for example:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

More Info: Media queries