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.