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:
Last Updated :
26 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...