How to change the webpage CSS styles when the user prints the webpage?
Tags: css
Published: 2022-10-14 14:53:58

---
  title: How to change the webpage CSS styles when the user prints the webpage?
  published: true
  tags: CSS
  date: Fri Oct 14 2022 20:23:58 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-webpage-css-styles-when-user-prints-webpage
  cover_image: https://melvingeorge.me/_next/static/images/main-9e8e5066f677a60ffb0325a98d49d357.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-webpage-css-styles-when-user-prints-webpage)
  
To change the CSS styles of a webpage when the user wants to print the page, you can use the media query syntax of `@media` followed by the keyword `print`. The keyword `print` in this case is the media type.

### TL;DR

```html
<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragrapgh tags -->
  <!-- 
    Using the `@media` syntax and the defining
    a type of `print` to change the styles when
    users want to print the webpage.
  -->
  <style>
    body {
      background-color: white;
    }

    p {
      color: red;
    }

    @media print {
      body {
        background-color: black;
      }

      p {
        color: white;
      }
    }
  </style>
</html>
```

For example, let's say we have a simple HTML showing a paragraph of `Hello World` like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>
```

Now let's change the background color of the `body` to `white` and the color of the `paragraph` element to `red` color using the `style` tag (We are using the `style` tag inside the HTML for simplicity, you can use an external stylesheet too).

```html
<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragraph tags -->
  <style>
    body {
      background-color: white;
    }

    p {
      color: red;
    }
  </style>
</html>
```

Now the output of the above HTML code looks like this,

![Hello World text shown in red color on the screen](https://melvingeorge.me/_next/static/images/hello-world-webpage-a13e7ddfb00f3a98a9123454fdfe5dae.png)

We aim to change the background color of the `body` tag to `black` and the `paragraph` tag to `white` when the user wants to print the webpage.

To do that we can use the media query syntax of `@media` followed by the keyword `print` to set the media type.

It can be done like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragrapgh tags -->
  <!-- 
    Using the `@media` syntax and the defining
    a type of `print` to change the styles when
    users want to print the webpage.
  -->
  <style>
    body {
      background-color: white;
    }

    p {
      color: red;
    }

    @media print {
      body {
        background-color: black;
      }

      p {
        color: white;
      }
    }
  </style>
</html>
```

Now when the user opts to print the web page, the body will be black and the paragraph text will be white.

See the above code live in [codesandbox](https://codesandbox.io/s/change-webpage-css-styles-when-printing-bu1mhk?file=/index.html).

That's all 😃!

### Feel free to share if you found this useful 😃.

---