Applying Styles Based On Media

In CSS to differentiate styles for print from styles for the computer screen media option is used as CSS can apply to a variety of different devices and media. Hence, for different media, different media attribute is applied to the <link /> element, or the <style> element or from within a style sheet, for different media @media rules is used.

The different types of media that CSS can be applied to are

Media Type	Description
all	Used for all media type devices
aural	Used for speech and sound synthesizers
braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
handheld	Used for small or handheld devices
print	Used for printers
projection	Used for projected presentations, like slides
screen	Used for computer screens
tty	Used for media using a fixed-pitch character grid, like teletypes
tv	Used for television-type devices

The default value is all . Only screen, print and all values are widely supported in computer browsers.

Certain CSS properties are only designed for certain media (e.g., the ‘page-break-before’ property only applies to paged media). Sometimes style sheets for different media types may share a property, but require different values for that property. For example, the ‘font-size’ property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

There are currently two ways to specify media dependencies for style sheets:

Specify the target medium from a style sheet with the @media or @import at-rules as

@import url(“fancyfonts.css”) screen;

@media print {

/* style sheet for print goes here */ }

@media print {

h1 { font-size: 50pt; text-align: center; } }

Specify the target medium within the document language so in HTML documents the “media” attribute on the LINK element specifies the target media of an external style sheet as

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<HTML>

<HEAD>

<TITLE>Link to a target medium</TITLE>

<LINK REL=”stylesheet” TYPE=”text/css”

MEDIA=”print, handheld” HREF=”other.css”>

</HEAD>

<BODY>

<P>The body…

</BODY>

</HTML>

Print preview option in the browser shows what the page will look like when it is printed