When printing an HTML document, these CSS stylerules are applied. Their purpose is to improve the print result e.g. by hiding banners and ads, correcting colors and font-sizes and generally adjusting the layout for printing.
CSS gives the possibility to provide styles for different media-types by adding the media-attribute to the style tag.
When triggering the print-function, browsers apply the styles defined for the mediatype print.
<!-- Including an external print stylesheet -->
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!-- Declaring print styles via the style tag -->
<style type="text/css" media="print">
/* styles */
</style>
When printing websites, special treatment of several HTML-Elements is required in order to achieve a decent print-result.
The most obvious problem might be links, which are not clickable (and thus are useless) when printed. However, the href-attribute could be made visible with the following print-only css-declaration:
a:after { content: " (" attr(href) ")"; font-size: 80%; }
Also colors, fonts and floats might need to be adjusted, so it is advised to provide CSS-styles for printing.
useful links:
