How to create printable webpage using CSS media queries ?
The media query is used to hide/show an element when printing the web pages. Use @media print query and set the visibility property to that element that needs to hide/show at printing. In this article, we use media query and visibility property to print the web page.
Example 1: In this example, we will print the body element at printing time. To hide the body element, set the visibility property to hidden inside the print media query.
HTML
<!DOCTYPE html><html> <head> <title> How to create printable webpage using CSS media queries? </title> <style> body { text-align: center; } h1 { color: green; } @media print { .noprint { visibility: visible; } } </style></head> <body class="noprint"> <h1>GeeksforGeeks</h1> <p> GeeksforGeeks: It is a computer science portal for geeks </p> </body> </html> |
Output:
Example 2: In this example, we will print the body element at printing time. To hide the body element, set the visibility property to hidden inside the print media query.
HTML
<!DOCTYPE html><html> <head> <title> How to create printable webpage using CSS media queries? </title> <style> body { text-align: center; } @media print { .noprint { visibility: visible; } } </style></head> <body class="noprint"> <img src= alt="GFG"></body> </html> |
Output:
Please Login to comment...