How to hide element at the time of printing using CSS?

CSS | Hiding elements while printing: In this tutorial, we will learn how to hide elements at the time of printing using CSS. Learn with the help of examples. By Anjali Singh Last updated : July 10, 2023

Introduction

We have come across many challenges while developing a website or web page and every challenge comes with new learnings. It is a trait of a good developer who develops or creates websites or web pages by learning at the same time. Therefore, every challenge posed at you, you must not give in there are numerous sources on the internet from where you can look for answers and get your problem solved. Besides, such problems come with an opportunity to learn something which in turn would improve your knowledge and you will be able to master skills to a greater extent. Similarly, the topic here is How to hide elements at the time of printing. Well, it sounds a bit tricky but the solution is very easy, so read on to find the answer.

We use various ways to make our website or web page responsive. Many properties come into play for making our website or web page responsive. Well, one can not know about all the properties regarding web development but one can learn about many properties regarding web development. Therefore, with that notion in mind let us move forward with the topic which is that how can we hide the element while printing and you will be rather surprised when you find out the answer?

Hide element at the time of printing using CSS

When the user wants to hide any element while printing he/she can simply use the visibility property in CSS and set its value to hidden within the @media print query. Easy as sugar right? Well, some things do sound a bit tricky at the start but when you start engaging with the problem the solution comes out to be rather easy. The method above is also easy when it comes to implementation.

Let's make it clear with the syntax below,

Syntax to hide element at the time of printing

@media print {
    element {
        visibility: hidden;
    }
}

Example to hide element at the time of printing

<!DOCTYPE html>

<html>

<head>
    <style>
        @media print {
            img {
                visibility: hidden;
            }
        }
    </style>
</head>

<body>
    <h1>Hide element at print</h1>
    <img src="img_forest.jpg" width="240" height="184">
</body>

</html>

Output

CSS | Hide element at print | Example (1)

In the above example, initially, the page looks like this before printing the page but as soon as we print the element the output would be different.

Output

CSS | Hide element at print | Example (2)

Conclusion

So, go on and start playing around with the new-found knowledge visibility property is a very crucial property when it comes to dealing with various elements and it also helps in making a website or webpage very responsive and stylish.

CSS Examples »

How to create a vertically scrollable div using CSS?

Rescale font based on container width in CSS