Print stylesheet organization in SASS

Introduction

Print stylesheets help make web pages look good when printed on paper. Organizing them well keeps your code clean and easy to update.

You want to make sure your webpage prints without unnecessary colors or backgrounds.

You need to hide navigation menus or buttons when printing.

You want to adjust font sizes and layout for better readability on paper.

You want to add page breaks or control how content flows across pages.

You want to keep your print styles separate from screen styles for easier maintenance.

Syntax

SASS

@media print {
  // print-specific styles here
}

// Or create a separate print stylesheet and link it with:
// <link rel="stylesheet" href="print.css" media="print">

The @media print block applies styles only when printing.

You can also use a separate CSS file linked with media="print" for print styles.

Examples

This example sets font size and removes background color only when printing.

SASS

@media print {
  body {
    font-size: 12pt;
    color: black;
    background: none;
  }
}

This hides navigation and buttons in the printed page.

SASS

@media print {
  nav, .button {
    display: none;
  }
}

Using a separate print stylesheet to set fonts and add page breaks before headings.

SASS

/* In a separate file print.scss */
body {
  font-family: serif;
  line-height: 1.4;
}

@media print {
  h1 {
    page-break-before: always;
  }
}

Sample Program

This example shows a webpage with a navigation bar and a button. When printed, the background becomes white, text turns black, and navigation and button are hidden. The heading starts on a new printed page.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Print Stylesheet Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
      padding: 1rem;
    }
    nav {
      background-color: #007acc;
      color: white;
      padding: 0.5rem;
      margin-bottom: 1rem;
    }
    button {
      background-color: #007acc;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    @media print {
      body {
        background: white;
        color: black;
        font-size: 12pt;
        padding: 0;
      }
      nav, button {
        display: none;
      }
      h1 {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <nav>Site Navigation</nav>
  <h1>Welcome to the Print Stylesheet Demo</h1>
  <p>This paragraph will appear in black text on white background when printed.</p>
  <button>Click Me</button>
</body>
</html>

Important Notes

Always test print styles by using your browser's print preview.

Keep print styles simple for faster printing and better readability.

Use page-break-before and page-break-after to control page breaks.

Summary

Print stylesheets make your webpage look good on paper.

Use @media print or separate print CSS files to organize print styles.

Hide unnecessary elements and adjust fonts and layout for printing.

Practice

1. What is the main purpose of a print stylesheet in web development?

easy

A. To make the webpage look good when printed on paper

B. To add animations to the webpage

C. To improve website loading speed

D. To change the webpage's background color on screen

Solution

1. Step 1: Understand what print stylesheets do

   Print stylesheets adjust the webpage's appearance specifically for printing on paper.

2. Step 2: Compare options to the purpose

   Only To make the webpage look good when printed on paper matches the purpose of print stylesheets, which is to make pages look good on paper.

3. Final Answer:

   To make the webpage look good when printed on paper -> Option A

4. Quick Check:

   Print stylesheets = good print appearance [OK]

Hint: Print stylesheets improve printed page look, not screen effects [OK]

Common Mistakes:

• Confusing print stylesheets with screen stylesheets
• Thinking print stylesheets add animations
• Assuming print stylesheets speed up loading

2. Which of the following is the correct way to write a print media query in Sass?

easy

A. @media print { body { font-size: 12pt; } }

B. @media screen { body { color: black; } }

C. @media all { body { background: white; } }

D. @media handheld { body { font-weight: bold; } }

Solution

1. Step 1: Identify the print media query syntax

   The correct syntax for print styles is @media print { ... }.

2. Step 2: Match the option with print media query

   @media print { body { font-size: 12pt; } } uses @media print correctly with a style inside.

3. Final Answer:

   @media print { body { font-size: 12pt; } } -> Option A

4. Quick Check:

   Print media query syntax = @media print [OK]

Hint: Use '@media print' to target print styles in Sass [OK]

Common Mistakes:

• Using '@media screen' instead of '@media print'
• Forgetting curly braces after '@media print'
• Using unsupported media types like 'handheld'

3. Given this Sass code, what will be the font size of paragraphs when printed?

@media print {
  p {
    font-size: 14pt;
  }
}
p {
  font-size: 16px;
}

medium

A. 14px

B. 16px

C. 16pt

D. 14pt

Solution

1. Step 1: Understand media query effect on print

   The @media print block applies only when printing, overriding other styles.

2. Step 2: Compare font sizes inside and outside print query

   Outside print, paragraphs have 16px font size; inside print, 14pt is set, which applies when printing.

3. Final Answer:

   14pt -> Option D

4. Quick Check:

   Print font size = 14pt [OK]

Hint: Print styles override screen styles inside '@media print' [OK]

Common Mistakes:

• Confusing px and pt units
• Ignoring media query overrides
• Assuming screen styles apply when printing

4. Identify the error in this Sass print stylesheet code:

@media print {
  .hide-on-print {
    display: none
  }
}

medium

A. Cannot use 'display: none' in print styles

B. Wrong media type, should be '@media screen'

C. Missing semicolon after 'display: none'

D. Class selector should start with '#' instead of '.'

Solution

1. Step 1: Check CSS syntax inside '@media print'

   Every CSS property must end with a semicolon; here, 'display: none' misses it.

2. Step 2: Verify other options

   Media type '@media print' is correct, class selectors use '.', and 'display: none' is valid in print styles.

3. Final Answer:

   Missing semicolon after 'display: none' -> Option C

4. Quick Check:

   CSS properties need semicolons [OK]

Hint: Always end CSS declarations with semicolons [OK]

Common Mistakes:

• Omitting semicolons in CSS blocks
• Confusing class selectors with ID selectors
• Using wrong media types for print styles

5. You want to hide navigation menus and change font size only when printing. Which Sass structure correctly organizes these print styles?

hard

A. nav { display: none; }
body { font-size: 12pt; }

B. @media print {
nav { display: none; }
body { font-size: 12pt; }
}

C. @media screen {
nav { display: none; }
body { font-size: 12pt; }
}

D. @media print {
nav { font-size: 12pt; }
body { display: none; }
}

Solution

1. Step 1: Identify correct media query for print styles

   Print styles must be inside @media print { ... } to apply only when printing.

2. Step 2: Check style rules for hiding nav and changing font size

   @media print { nav { display: none; } body { font-size: 12pt; } } hides nav with display: none; and sets font size on body inside print media query, which is correct.

3. Final Answer:

   @media print { nav { display: none; } body { font-size: 12pt; } } -> Option B

4. Quick Check:

   Print styles inside '@media print' with correct selectors [OK]

Hint: Group all print styles inside '@media print' block [OK]

Common Mistakes:

• Placing print styles outside '@media print'
• Using '@media screen' instead of print
• Mixing display and font-size on wrong selectors