We use CSS to change the appearance of our website, We can also define how it will look on the print screen. We don’t always want the same thing seen on a website printed on paper. For example, we want one font for the screen version and another for the print version.
We can add a dedicated CSS file for the print screen. Here is the example below.
<link rel="stylesheet" type="text/css" media="print" href="printer.css">
Here media=“print” is attritube, for website we would user metia=“screen” and for both screen and print we would use media="all"
What if we just want to add a little change to the print screen? And we don’t want to add another CSS file to our HTML?
In that case, we can use inline CSS and a simple media query rule. Here is the example below
For Printer:
<style type="text/css">
@media print {
p { font-family: georgia, times, serif; }
}
</style>
For Screen:
<style type="text/css">
@media screen{
p { font-family: georgia, times, serif; }
}
</style>
For Both:
<style type="text/css">
@media screen, print {
p { font-family: georgia, times, serif; }
}
</style>
This rule allows us to specify different styles for different media. So, we can define different rules for a screen and a printer.