Print stylesheet organization in SASS - Browser Rendering Trace

Render Flow - Print stylesheet organization

Load HTML Document

↓

Parse CSS Stylesheets

↓

Identify @media print rules

↓

Apply print-specific styles

↓

Render print layout

↓

Send to printer or print preview

The browser reads the HTML, then parses all CSS including print-specific styles inside @media print blocks. It applies these styles only when printing or in print preview, changing the layout and appearance accordingly.

Render Steps - 4 Steps

Code Added:Normal screen styles applied (header, footer visible)

Before

[header]
[main]
[footer]

→

After

[header]
[main]
[footer]

Initially, the page shows header, main content, and footer as usual on screen.

🔧 Browser Action:Render normal screen layout

Code Sample

This code hides header and footer when printing, sets readable font size and colors, and makes main content fill the page width for print.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Print Styles Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>Site Header</header>
  <main>
    <p>This is the main content.</p>
  </main>
  <footer>Site Footer</footer>
</body>
</html>

SASS

@media print {
  header, footer {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
  main {
    width: 100%;
  }
}

Render Quiz - 3 Questions

After applying step 2, what do you see on the printed page?

A Header, main content, and footer all visible

B Only the main content visible, header and footer hidden

C Only header and footer visible, main content hidden

D Page is blank with no content

Common Confusions - 3 Topics

Why do my header and footer still show when I print?

The print stylesheet with 'display: none' inside @media print might not be loaded or linked correctly. Also, browser print preview caches styles, so refresh or check the CSS link.

💡 Check that @media print styles are loaded and active in print preview (see render_step 2).

Why does my background color not print?

Many browsers disable background colors by default in print to save ink. This is a browser setting, not CSS. Users must enable background printing in print dialog.

💡 Background colors may not appear unless user enables them in print settings.

Why is my font size too small or too large on print?

Font size in print styles should use absolute units like pt for consistent sizing. Using relative units without adjusting can cause unexpected sizes.

💡 Use pt units for font-size in print styles for predictable results (see render_step 3).

Property Reference

Property	Value Applied	Effect on Print Layout	Common Use
display	none	Hides elements from print output	Remove navigation, ads, or footers
font-size	12pt	Sets readable text size for paper	Improve print readability
color	black	Ensures text prints clearly	Override screen colors that may not print well
background	white	Removes screen backgrounds for clean print	Save ink and improve clarity
width	100%	Makes content fill page width	Use full printable area

Concept Snapshot

Print styles use @media print to change layout only when printing. Common changes: hide navigation/footer with display:none. Set font-size in points for clear text on paper. Use colors and backgrounds carefully; browsers may ignore backgrounds. Expand main content width to use full page space. Always test print preview to see effects.

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