CSS @media print Property

Posted in CSS Tutorial

Updated on Sep 14, 2024

By Mari Selvan

👁️ 2 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The @media print property in CSS is used to apply specific styles when a web page is printed. By targeting the print media type, you can customize how your content appears on paper, ensuring it is formatted appropriately for printing. This is particularly useful for creating printer-friendly versions of your web pages, such as removing unnecessary elements or adjusting the layout.

💡 Syntax

The @media print property is used within a media query to define styles that apply only when the page is printed. The syntax is as follows:

Syntax

Copied

@media print {
  /* Print-specific styles go here */
}

🏠 Property Values

@media print: This media query targets print devices and applies the enclosed styles only when the document is being printed.

🎛️ Default Value

The default value for the @media print property is that no print-specific styles are applied. If no @media print rules are defined, the page will use the default screen styles when printed.

📝 Example Usage

📜 Basic Usage

In this example, we'll hide the navigation bar and adjust the font size when the page is printed.

CSS

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media print Example</title>
  <style>
    /* Default screen styles */
    .navbar {
      background-color: #333;
      color: #fff;
      padding: 10px;
    }
    
    /* Print-specific styles */
    @media print {
      .navbar {
        display: none; /* Hide the navbar when printing */
      }
      
      body {
        font-size: 12pt; /* Adjust font size for printing */
      }
    }
  </style>
</head>
<body>
  <div class="navbar">
    <h1>My Website</h1>
  </div>
  <main>
    <h2>Content to Print</h2>
    <p>This content will be printed with adjusted styles.</p>
  </main>
</body>
</html>

🖥️ Browser Compatibility

The @media print property is widely supported across all modern browsers. This ensures that your print-specific styles will be applied consistently regardless of the browser your users are using. Always verify the appearance of your printed content to ensure it meets your expectations.

🎉 Conclusion

The @media print property is an essential tool for web developers who want to ensure their content is presented correctly when printed.

By defining print-specific styles, you can create a clean, professional-looking printout of your web pages, free from unnecessary elements and optimized for paper. Experiment with different styles to achieve the best results for your printed content.