Tornar DIV invisível ao imprimir | CSS diferenciado para impressão

As vezes precisamos que um determinado elemento visual ou parte do conteúdo do Site seja visível apenas na tela, mas que fique invisível ao imprimir. Ou então, queremos um estilo diferenciado para impressão. CSS resolve isso para você!

Introdução

Um recurso útil do CSS é o “Media Print“, pois permite você controlar, à parte, o estilo daquilo que será impresso.

Por exemplo, você pode ter um CSS que define o estilo padrão da sua página Web e pode ter um outro CSS para diferenciar o estilo de certos elementos, como DIV, quando estes forem impressos. Isto é interessante usar quando você precisar ocultar alguns botões ou mesmo trocar a cor de fundo ao imprimir um documento. Outra ideia é fazer com que apareça um logotipo ou marca d’água na hora de imprimir. Enfim, são inúmeras as possibilidades, vai da sua criatividade ou necessidade.

CSS – Externo

O mais comum é você definir seu código CSS em um arquivo externo print.css, com estilo diferenciado para impressão.

print.css | A chamada a este arquivo será feita dentro de site.html

    #noprint { display:none; } 
     body { background: #fff; }

E então fazer a chamada do arquivo print.css em suas páginas Web.

site.html

    <html>
        <head>
            <title>Site</title>
            <link rel="stylesheet" href="print.css" type="text/css" media="print"> 
        </head>
        <body bgcolor="#ff0000"> 
            A cor de fundo padrão desta página é vermelha,
            porém, ao imprimir, passará a ser branca.
            <div id="noprint">
                Tudo que estiver entre esta DIV "noprint"
                será visível na tela, porém, invisível ao imprimir.
            </div>
        </body> 
    </html>

CSS – Interno

Uma segunda alternativa é diferenciar o estilo da impressão usando o código CSS dentro da própria página Web. Neste caso, ficaria assim:

site.html

    <html>
        <head>
            <title>Site</title>
            <style>
                @media print { 
                    #noprint { display:none; } 
                    body { background: #fff; }
                }
            </style>
        </head>
        <body bgcolor="#ff0000"> 
            A cor de fundo padrão desta página é vermelha,
            porém, ao imprimir, passará a ser branca.
            <div id="noprint">
                Tudo que estiver entre esta DIV "noprint"
                será visível na tela, porém, invisível ao imprimir.
            </div>
        </body> 
    </html>