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>
<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>
<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>
<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,
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>
<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.
That's all 😃!
Top comments (0)