Open In App

How to create printable webpage using CSS media queries ?

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads