Uncategorized

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

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

  1. all – Used for all media type devices

  2. aural – Used for speech and sound synthesizers

  3. braille – Used for braille tactile feedback devices

  4. embossed – Used for paged braille printers

  5. handheld – Used for small or handheld devices

  6. print – Used for printers

  7. projection – Used for projected presentations, like slides

  8. screen – Used for computer screens

  9. tty – for media using a fixed-pitch character grid, like teletypes and terminals

  10. 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.

Categories: Uncategorized

Leave a Reply