One of the significant advantages of CSS is that we can create different style rules to represent our content in different formats, on different devices, or for different users: for example, the display of a web page on a cellphone should be different from that on a 27″ monitor which will be different again from the printed version of that page.

If no media value or viewport metatag is specified, style rules are assumed by the browser to apply to every media format and device, at least within reason: handheld devices, such as iPhones, will attempt to scale the web page down, and browsers will usually reverse colors if you are trying to print out a page with a black background and white text to save ink. However, we can be much more precise by specifying different style rules for different devices through different media queries:

/* styles that apply to everything here */
@media print { 
	/* styles that are applicable only to print here */
}

It is important to note that a general stylesheet will apply to all devices and media types; stylesheets defined after this point for print, etc will be used in addition to the first stylesheet: they do not have to repeat rules that are already present.

Photograph by Bea Mahan, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.