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 differently in print and different in the browser, In that case, we can use media type for specific devices.
Example: If we have a header in green color in a 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 the print command you can see it.

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

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

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

Inline code

@media print {
body {
color:red;
}

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