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>w3wiki</h1> <p> w3wiki: It is a computer science portal for Beginner </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= "https://media.w3wiki.net/wp-content/uploads/w3wiki-9.png" alt="GFG"> </body> </html> |
Output:
Contact Us