articles

Home / DeveloperSection / Articles / Change the style for print or print preview command in HTML and CSS

Change the style for print or print preview command in HTML and CSS

Vijay Shukla 4937 08-Jan-2013

In this article I’m explaining how to print a block in HTML and CSS.

If I am working on a web application (HTML) and I want to provide to print option of any page or section of my application for users, so we need to set the CSS for print media because if you want to hide some elements and change color of element during print so we can write new CSS under the @media print. Below I am giving an example for explain this concept:

Html Code:
</html>

<body>
    <table class="tble">
        <tr>
            <td>
                Student Name
            </td>
            <td>
                John Sypon
            </td>
        </tr>
        <tr>
            <td>
                Student Rollnumber
            </td>
            <td>
                R001
            </td>
        </tr>
        <tr>
            <td>
                Student Address
            </td>
            <td>
                132 Kane Street Toledo OH 43612.
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="Print" class="btn" onclick="PrintDoc()"/>
            </td>
        </tr>
    </table>
</body>
</html>

 CSS:

.btn

    {
        background-color: #AFAFAF;
        display: block;
    }
    .tble
    {
        background-color: #e5e5e5;
        border: 1px solid #CD853F;
    }

 Output:

Change the style for print or print preview command in HTML and CSS

Print Preview:

Change the style for print or print preview command in HTML and CSS

Above output show in screen. When we want to give the command for print and print preview the print button also will be appear(such as above Print Preview image), and I want print button would not be appear when we give the command for print or print preview. Now we will add a new style for print command under the @media print in CSS.

New CSS:
@media screen /*--This is for Screen--*/

{
    .btn
    {
        background-color: #AFAFAF;
        display: block;
    }
    .tble
    {
        background-color: #E5E5E5;
        border: 1px solid #CD853F;
    }
}
@media print /*--This is for Print--*/
{
 .btn
 {
  display: none; /*This Line of code will hide the button when give command print or print preview*/
 }
 .tble
 {
  background-color: #CD853F;
  border:1px solid green;
  width:50px;
/*Above lines code will set the table background-color and change the border color when we give the print and preview command*/

 }

}

 After added above New CSS code:

When we show output on screen it is same as last output but when we give the command print or print preview the new output will appear below is output.

Change the style for print or print preview command in HTML and CSS

Now above print preview we can see that the table border color will be change in to green, background-color in #CD853F (orange) color and print button is hiding.



Updated 07-Sep-2019

Leave Comment

Comments

Liked By