Targeting only Firefox with CSS

How to hide an element when printing a web page using CSS?

Last Updated : 25 Sep, 2024

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 Printing

In 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 Printing

In 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:

Targeting only Firefox with CSS

K

Kanishk_Verma

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

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

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

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

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

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

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-

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

How to Align Content of a Div to the Bottom using CSS?

Here are different ways to align the content of a div to bottom using CSS.1. Using 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.Syntaxposition: abso

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