SASSmarkup~10 mins

Print stylesheet organization in SASS - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

Test your understanding

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

AHeader, main content, and footer all visible

BOnly the main content visible, header and footer hidden

COnly header and footer visible, main content hidden

DPage 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.