Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a printable webpage using CSS media queries?
We can create a printable webpage, and control the styling in the print preview of a page using the CSS media query print property, @media print. @media print is a CSS media query that allows us to add page styling to the print preview page of any webpage. Using this, we can create a printable webpage by specifying the “visibility” of an HTML element to “visible” or “hidden” under the given media query, We can also add any other styling we want to have in the print preview screen to the @media print query.
Syntax
@media print {
/* CSS Styles here */
}
Here, @media print is the CSS media query that we will use to add stylings to our print preview page.
Example 1
In this example, we will show the “p” tag’s content in the print preview of the webpage by setting the “visibility” to “visible” in the @media print CSS query.
<html lang="en">
<head>
<title>How to create printable webpage using CSS media queries?</title>
<style>
@media print {
p {
visibility: visible;
}
}
</style>
</head>
<body>
<h3>How to create printable webpage using CSS media queries?</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>
Example 2
In this example, we will hide the “p” tag’s content in the print preview of the webpage by setting the “visibility” to “hidden” in the @media print CSS query.
<html lang="en">
<head>
<title>How to create printable webpage using CSS media queries?</title>
<style>
@media print {
p {
visibility: hidden;
}
}
</style>
</head>
<body>
<h3>How to create printable webpage using CSS media queries?</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>
Conclusion
In this article, we learned about @media print CSS media query, and we used it to create a printable webpage, with the help of two different examples. In the first example, we displayed “p” tag’s content in the print preview page, and in the second example, we hid the “p” tag’s content in the print preview.
425 Views
To Continue Learning Please Login