Understanding CSS Media Type ( print , screen ) with an example

Media Type

Media Types allow you to specify how documents will be presented in different media.

Different Media Types

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 - for media using a fixed-pitch character grid, like teletypes and terminals
tv - Used for television-type devices

CSS Media Type - screen , print with example

Step 1 - Create a css for screen and name it ForScreen.css

div.noprint
{
font-size:40px;
color:red;
font-weight:bold;
}
div.both
{
font-size:40px;
color:red;
font-weight:bold;
}
div.onlyprint
{
display: none;
}

Step 2 - Create a css for print and name it ForPrint.css

div.noprint
{
display:none;
}
div.both
{
font-size:40px;
color:black;
font-weight:bold;
}
div.onlyprint
{
font-size:40px;
color:black;
font-weight:bold;
}

Step 3 - Create a Trail.html with below code :

<HTML>
<head>
<link media="screen" href="forScreen.css" type="text/css" rel="stylesheet" />
<link media="print" href="forPrint.css" type=text/css rel="stylesheet" />
</head>
<body>
<table border=1px;>
<tr><td height=100px;>
<div class="noprint">This area will not be printed </div></td></tr>
<tr><td height=100px;>
<div class="both">The font would be black in print but red on the screen</div></td></tr>
<tr><td height=100px;>
<div class="onlyprint">This area will not be present on the screen but will be printed</div>
</td></tr>
</table>
</body>
</HTML>

Step 4 : Open the Trail.html in Browser i.e. Media = screen .

As seen from above for media = screen , ForScreen.css was used.

Step 5 : Print preview of Trail.html is shown below :

As shown above, for print media ForPrint.css is used.