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 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 values:
all (the default), screen (for computer monitors), braille (for braille tactile feedback devices), embossed (for braille printers), handheld (for handheld internet devices such as iPhones and tablets), print, projection, speech (for text-to-speech synthesisers), tty (for teletype terminals), and tv.
Under CSS 1 & 2, different style sheets are created for different media types, and linked to separately:
- <link rel="stylesheet" href="styles.css" type="text/css" media=“all” />
- <link rel="stylesheet" href="styles_p.css" type="text/css" media=“print” />
Style rules may also be specified to apply to multiple formats at the same time:
- <style type=“text/css” media=“screen, handheld” >
- </style>
Under CSS3, no separate documents need to be written: styles for other media are added to the stylesheet itself by the use of 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 stylesheet defined as all, or with no media definition, 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 already present.
so we don't need the jQuery minimum length anymore:) cool!


