Home >>CSS Tutorial >How do I hide an element when printing a web page
How do I hide an element when printing a web page
How to make an element hidden when printing a web page using CSS?
How do I hide an element when printing a web page
In order to hide an element in CSS when printing a webpage, the media query is used widely. By using @media print query the user can set the visibility hidden to that element that is needed to hide at the time of printing. The media query was earlier introduced in the CSS2 and it made possible to define the different style rules for the various different media types.
Media query in the CSS3 took it ahead the media query of CSS2. Now, instead of looking for a type of device, these queries look at the capability of the device.
Here are the things that is checked by the use of media queries:
- width and height of the device
- width and height of the viewport
- resolution
- orientation (Landscape or portrait)
Let's look at the following example to understand the above concept. Please note that here media query is used to hide the h1 and the visibility is set to hidden:
<!DOCTYPE html>
<html>
<head>
<title>Hide element at print</title>
<style>
body {
text-align:center;
}
h1 {
color:red;
}
@media print {
.noprint {
visibility: hidden;
}
}
</style>
</head>
<body>
<h1 class = "noprint">PHPTPOINT</h1>
<p>PHPTPOINT: Think PHP, Think PHPTPOINT!</p>
</body>
</html>
Output :Before Printing
PHPTPOINT
PHPTPOINT: Think PHP, Think PHPTPOINT!
Output :After Printing
PHPTPOINT: Think PHP, Think PHPTPOINT!