CSS Media Types and Printer Friendly Pages

Media refers to the type of device used to display a webpage, such as a computer screen. This is one of the best ways to build printer friendly Web pages. Sometimes we need to display our page different in print and different in browser, In that case we can use media type for specific device.
Example: If we have header in green color in web browser and we want to red header for print media then we will define red color under the print media stylesheet. That means CSS allows you to separate your design from your markup and tell a page to display a different way depending upon what device is being used to render it.

External Link
With the below code, “style.css” will only be applied to the page when it’s printed. If you press print command you can see it.

<link rel="stylesheet" href="style.css" type="text/css" media="print ">

Import method
If we use import method then we can use below code

@import url("style.css") print;

Inline code

@media print {
body {
color:red;
}

Below are the media types can used to target different types of devices like printers, handheld devices, computer.

Media Type Description
all All devices.
aural Speech synthesizers.
braille Braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld handheld devices.
print material to be printed.
projection Projected presentations.
screen Computer screens.
tty Media using a fixed-pitch character grid.
tv TV-type devices.

Leave a Reply

Your email address will not be published. Required fields are marked *