Media Query in CSS tells our browser, how to behave in different media types and screen sizes. Here we will talk about print media. By default our browser takes care of print by if you want to customize it wih your own way they we should use print media query. This is how we can write the media query. In your css file or create seperate .CSS file for writing print query.
@media print {
/*All other code write here*/
#header, #footer, #nav { display: none !important; }
}
For better understanding of this media query. Lets understand with this page.Here. At this link our task is to print the resume exactly in Printable resume format. We will handle this using @ media print query
Step 1 : First and the most important thing is to Hide all those things which you dont want to print. So for this we will use css property display : none;. If you see that page there we dont want to print footer, header , navigation and button on the resume so we make it {display: none}.
Step 2 : If you are using shadow property in your css. Then remove that shadow property as well otherwise you will see dark black border. ! important is optional. If you used it in your main css file then use it in media print.
Step 3 : It is better to use body width 100%. It will cover the maximum area of the page.
Step 4 : Some times we need to change the font size, width of some div and color of some elements then change the css as well .
Step 5 : Now the important thing if you have long table or table is floating from one page to other page then add below in your css. Otherwise you will see the row is breaking while printing the page.
Step 6 : To remove page url date and title in the page. Add this style in your HTML page.