CSS Print Style Sheets - Examples

CSS Print Style Sheets - Examples

I have had a look at the sites you linked to and they do not appear to have any print styles associated with them. I believe they are using the browsers default print settings. So one of the big changes is background images being hidden default. For CSS-Tricks, the reason it might look so different is because it uses media queries. So if you narrow your browser to 800px or less, you will see that the list of posts expand to the full width of the browser as they do when the document is printed.

However in general, print styles are either set using a media tag in your existing stylesheet:

@media print{
    /*styles here*/
}

or linking to a stylesheet specifically for print purposes:

<!--These styles styles are only for screens as set by the media value-->
<link rel="stylesheet" href="css/main.css" media="screen">

<!--These styles styles are only for print as set by the media value-->
<link rel="stylesheet" href="css/print.css" media="print">

CSS @media print not working at all

If you are using @media print, you need to add !important in your styles, or the page will use the element's inline styles that have higher priority.

E.g.

<div class="myelement1" style="display:block;">My div has an inline style.</div>

In @media print, add !important and be a winner

@media print {
   .myelement1, .myelement2 { display: none !important; }
}

CSS print stylesheet generated content not showing up

This is a feature of the CSS Generated Content for Paged Media (affectionately known as GCPM) module. There are no known stable implementations of GCPM in mainstream browsers at this time, though there is some coverage of the related CSS Paged Media 3 module.

Browser related: css print style sheets - stopping client download overhead with @media

Not a great solution, but you could provide a "Print" button which modifies the style when it's clicked prior to actually printing and changes it back afterwards?

For example (using jQuery):

<script type="text/javascript" language="javascript">
    function doprint() {
        $('.class').css('display','list-item').css('list-style-image','img.jpg');
        window.print();
        $('.class').css('display','none').css('list-style-image','');
    }
</script>

<input type="button" onclick="doprint();" />

Obviously you can get around this by using the browser's Print function.

There's also the issue of the overhead you've saved by not preloading the image being well and truly used up by using jquery and script...

How to only show certain parts with CSS for Print?

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

How to format an HTML table using CSS for printing?

Within your style sheet, use

@media print {
  /* put your CSS rules if they are to apply in print only */
}

For example,

@media print {
   * { color: black; background: white; }
   table { font-size: 80%; }
}

The details depend on the types of problems you expect to have with printing your specific table. Generally, if you have set fixed column widths (e.g. in pixels), you probably need to reconsider this part of your design. If you are using colors to convey essential information (e.g., red cell standing for absence, green for presence), you need to reconsider this decision.

---

Related Topics