--- title: "Change the style for print or print preview command in HTML and CSS" description: "In this article I’m explaining how to print a block in HTML and CSS." author: "Vijay Shukla" published: 2013-01-08 updated: 2019-09-07 canonical: https://www.mindstick.com/articles/1102/change-the-style-for-print-or-print-preview-command-in-html-and-css category: "css-css3" tags: ["css-css3"] reading_time: 4 minutes --- # Change the style for print or print preview command in HTML and CSS In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370) I’m explaining how to print a block in HTML and CSS.\ If I am working on a [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about) (HTML) and I want to provide to print option of any page or [section](https://yourviews.mindstick.com/story/2851/is-c-section-bad) of my application for users, so we need to set the CSS for print media because if you want to hide some [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) and change color of element during print so we can write new CSS under the @media print. Below I am [giving](https://yourviews.mindstick.com/view/81621/natural-disasters-in-2020-giving-us-alarm-warning) an example for [explain](https://www.mindstick.com/forum/159699/what-is-a-compilation-error-in-dot-net-core-explain-with-an-example) this [concept](https://www.mindstick.com/blog/79/routing-concept-in-dot-net): ##### Html Code: ```

Student Name	John Sypon
Student Rollnumber	R001
Student Address	132 Kane Street Toledo OH 43612.

``` 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](https://www.mindstick.com/mindstickarticle/bf2bf789-e11c-4527-b744-9ff1696179ce/images/abf9fbe5-6cd4-4e36-b36d-c2003048af53.png) ##### Print Preview: ![Change the style for print or print preview command in HTML and CSS](https://www.mindstick.com/mindstickarticle/bf2bf789-e11c-4527-b744-9ff1696179ce/images/e31f6a7b-9b21-4ee8-a184-50cdde7d1980.png) Above output show in screen. When we want to give the [command](https://www.mindstick.com/blog/178/synchronous-and-asynchronous-command-execution-in-c-sharp-dot-net) for print and print [preview](https://www.mindstick.com/forum/429/i-want-to-get-full-path-of-lt-asp-fileupload-gt-and-then-client-can-click-the-preview-button-to-see-what-file-he-here-has-uploaded) 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](https://www.mindstick.com/mindstickarticle/bf2bf789-e11c-4527-b744-9ff1696179ce/images/695782bf-7e9a-4689-bdfb-49a00e4767c2.png) 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. \ --- Original Source: https://www.mindstick.com/articles/1102/change-the-style-for-print-or-print-preview-command-in-html-and-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.