Member-only story
Print specific CSS
How to setup a css stylesheet that affects how a website is printed.
Did you know that you can setup a specific set of css rules that apply to your website when it is printed? Doing this can give you the option of hiding things you don’t want to show when printed, or adding things you want to include when printed but not when viewed on the screen. This means you could add a special footer when a page is printed reminding the user where it came from for example.
How to define print specific css rules?
In your css file you can use a media tag to specify the styles to apply for printing.
@media print {...}
If you’re doing it this way, you also need to ensure you put your screen styles in an @media screen {…}and make sure to omit the media property when linking it.
It’s also possible to define the rules in a separate css file and specify the media type when linking it.
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="style.css" media="screen">
