CSS Printing: A Comprehensive Guide for Beginners

Hello there, future CSS maestros! Today, we're going to dive into the fascinating world of CSS printing. As your friendly neighborhood computer teacher, I'm excited to take you on this journey. Don't worry if you've never written a line of code before – we'll start from the very basics and work our way up. So, grab a cup of coffee (or tea, if that's your jam), and let's get started!

CSS - Printing

CSS Printing - Using A Print Style Sheet

Ever tried to print a webpage only to find that it looks nothing like what you see on screen? That's where print style sheets come to the rescue! They're like magical spells that transform your web content into printer-friendly formats.

Let's start with a simple example:

<head>
  <link rel="stylesheet" type="text/css" href="screen.css" media="screen">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

In this snippet, we're telling the browser to use different style sheets for screen and print. The media attribute is our secret weapon here. When you view the page on screen, it uses screen.css. But hit that print button, and boom! print.css takes over.

CSS Printing - Using Media Queries and @page At-Rule

Now, let's level up our game with media queries and the @page rule. These are like the dynamic duo of CSS printing!

@media print {
  body {
    font-size: 12pt;
    color: #000;
    background-color: #fff;
  }

  @page {
    margin: 1in;
  }
}

This code says, "Hey browser, when you're printing, make the text 12pt, black on white, and give me 1-inch margins all around." The @media print part is our media query, and @page sets up our page layout.

CSS Printing - Print Requests Detection

Wouldn't it be cool if your webpage could know when someone's trying to print it? Well, it can! Here's how:

window.addEventListener('beforeprint', function() {
  console.log('Printing...');
});

window.addEventListener('afterprint', function() {
  console.log('Finished printing');
});

This JavaScript snippet is like a tiny spy that whispers to us when printing starts and ends. Super handy for making last-minute adjustments!

CSS Printing - Using @page at-rule

The @page rule is like a magic wand for controlling your printed pages. Let's see it in action:

@page {
  size: A4;
  margin: 0;
}

@page :first {
  margin-top: 2cm;
}

Here, we're setting all pages to A4 size with no margins, but giving the first page a special 2cm top margin. It's like rolling out the red carpet for your content!

CSS Printing - Using @media Query

We've seen @media before, but let's dive deeper:

@media print {
  .no-print {
    display: none;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }
}

This snippet hides elements with the class no-print and adds the URL after any external links. It's like having a personal assistant tidying up your webpage for printing!

CSS Printing - Use Of afterprint Event

Remember our little JavaScript spy from earlier? Let's put it to work:

window.addEventListener('afterprint', function() {
  document.body.style.backgroundColor = 'lightblue';
  alert('Hope you enjoyed your printout!');
});

This code changes the background color after printing and shows a friendly message. It's like leaving a little thank-you note for your users!

CSS Printing - Link To An External Style Sheet

Last but not least, let's recap how to link an external print style sheet:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

This line is your golden ticket to print-friendly webpages. Just create a file named print.css, add your print styles, and you're good to go!

Method	Description	Example
Print Style Sheet	Separate CSS file for print media	`<link rel="stylesheet" type="text/css" href="print.css" media="print">`
Media Queries	CSS rules that apply only when printing	`@media print { body { font-size: 12pt; } }`
@page At-Rule	Controls page-specific properties	`@page { margin: 1in; }`
Print Request Detection	JavaScript to detect print attempts	`window.addEventListener('beforeprint', function() { ... });`
afterprint Event	JavaScript to run code after printing	`window.addEventListener('afterprint', function() { ... });`

And there you have it, folks! You've just taken your first steps into the world of CSS printing. Remember, practice makes perfect, so don't be afraid to experiment. Who knows? You might just become the Picasso of print stylesheets! Until next time, happy coding!

Credits: Image by storyset