Home » CSS

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

CSS | Hiding element while printing: Here, we are going to learn how to hide element at the time of printing using CSS?
Submitted by Anjali Singh, on February 07, 2020

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.

Methods:

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?

Solution:

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:

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

Example:

<!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.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.