How to hide an element when printing a web page using CSS? Last Updated : 25 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Media queries allow you to apply different styles for different media types, such as screens or print. To hide certain elements (like headers or images) when printing a webpage, you can use the @media print query and set the visibility: hidden or display: none to hide those elements during printing.Below are two examples that demonstrate how to hide elements when printing a web page.Example 1: Hide an <h1> Element When PrintingIn this example, the <h1> element is visible on the screen, but it is hidden when the page is printed by using a media query. html <!DOCTYPE html> <html> <head> <title>Hide element at print</title> <style> body { text-align:center; } h1 { color:green; } @media print { .noprint { visibility: hidden; } } </style> </head> <body> <h1 class="noprint">GeeksforGeeks</h1> <p> GeeksforGeeks: It is a computer science portal for geeks </p> </body> </html> Output: Example 2: Hide an <img> Element When PrintingIn this example, an <img> element is visible on the screen but hidden when printing by using the @media print query and display: none to completely remove it from the print layout. html <!DOCTYPE html> <html> <head> <title>Hide element at printing</title> <style> body { text-align:center; } h1 { color:green; } @media print { img { visibility: hidden; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> <img src="gfg.png" alt="image"> <style> .noprint { visibility: hidden; } </style> </body> </html> Output: Comment More infoAdvertise with us Next Article What does the â+â (plus sign) CSS selector mean? K Kanishk_Verma Follow Improve Article Tags : CSS Similar Reads Set cellpadding and cellspacing in CSS Cell Padding The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value. Example: html <!DOCTYPE html> <html> <head> <title>cell padding</title> <style> table, th 1 min read How to overlay one div over another div using CSS Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple 2 min read How to disable a link using only CSS? To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app 3 min read What does the “+†(plus sign) CSS selector mean? The "+" (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element. Note: The IE8 and earlier versions </DO 1 min read How to Vertically Center Text with CSS? Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically cen 2 min read How to horizontally center a div using CSS ? To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the 2 min read Change an HTML5 input placeholder color with CSS The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non- 2 min read How to Disable Text Selection Highlighting using CSS? The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content.Syntaxuser-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /* F 2 min read How to Align Content of a Div to the Bottom? Here are different ways to align the content of a div to the bottom.1. Using CSS PositioningThe positioning involves setting the parent container to position: relative and the content to position: absolute with bottom: 0, which places the content at the container's bottom edge.Syntax:position: absol 2 min read Displaying XML Using CSS XML stands for Extensible Markup Language. It is a dynamic markup language. It is used to transform data from one form to another form. An XML file can be displayed using two ways. These are as follows :- Cascading Style Sheet Extensible Stylesheet Language Transformation Displaying XML file using C 4 min read Like