@min and @max : The Value Range Attributes
The min and max attributes define the minimum and maximum values for numeric input fields, meter elements, and progress indicators in PDF documents. They establish the valid range for values, enabling proper percentage calculations, threshold evaluations, and visual scaling in rendered output.
Usage
The min and max attributes control value ranges and scaling:
- Define the lower and upper bounds for numeric values
- Enable percentage calculations for meters and progress bars
- Set constraints for input field values
- Support decimal and integer values
- Work with data binding for dynamic ranges
- Essential for proper meter threshold coloring
- Default values: min=0, max=1 (for most elements)
<!-- Basic meter with range 0-100 -->
<meter value="75" min="0" max="100">75%</meter>
<!-- Progress bar with custom range -->
<progress value="45" min="0" max="100">45%</progress>
<!-- Input field with numeric constraints -->
<input type="number" value="5" min="1" max="10" />
<!-- Meter with decimal range -->
<meter value="0.75" min="0" max="1">75%</meter>
<!-- Dynamic range with data binding -->
<meter value=""
min=""
max="">
</meter>
Supported Elements
The min and max attributes are supported by the following elements:
| Element | Description |
|---|---|
<meter> |
Gauge/measurement element - defines the full scale range |
<progress> |
Progress bar element - defines the completion range |
<input> |
Input field (number, range types) - defines valid input range |
How Min and Max Work
Range Calculation
The min and max values establish the scale for percentage calculations:
percentage = (value - min) / (max - min) * 100%
Examples:
<!-- Value 50 in range 0-100 = 50% -->
<meter value="50" min="0" max="100">50%</meter>
<!-- Value 5 in range 0-10 = 50% -->
<meter value="5" min="0" max="10">50%</meter>
<!-- Value 0.5 in range 0-1 = 50% -->
<meter value="0.5" min="0" max="1">50%</meter>
<!-- Value 150 in range 100-200 = 50% -->
<meter value="150" min="100" max="200">50%</meter>
Value Clamping
Values outside the min/max range are typically clamped:
<!-- Value exceeds max: displayed as 100% -->
<meter value="150" min="0" max="100">Clamped to 100%</meter>
<!-- Value below min: displayed as 0% -->
<meter value="-10" min="0" max="100">Clamped to 0%</meter>
<!-- Valid value: displayed normally -->
<meter value="75" min="0" max="100">75%</meter>
Default Values
If not specified, default values are used:
<!-- No min/max: defaults to 0-1 range -->
<meter value="0.6">60%</meter>
<!-- Same as: -->
<meter value="0.6" min="0" max="1">60%</meter>
<!-- Only max specified: min defaults to 0 -->
<progress value="45" max="100">45%</progress>
<!-- Only min specified: max defaults to 1 -->
<meter value="0.3" min="0">30%</meter>
Meter Threshold Interaction
For meters, min/max interact with low/high/optimum thresholds:
<!-- Full range with thresholds -->
<meter value="75" min="0" max="100" low="30" high="80" optimum="50">
75%
</meter>
<!-- The thresholds are evaluated within the min/max range:
- min=0 to low=30: Sub-suboptimal range (red)
- low=30 to high=80: Optimal range (green if optimum is here)
- high=80 to max=100: Suboptimal range (orange)
-->
Binding Values
The min and max attributes support data binding for dynamic ranges:
Simple Range Binding
<!-- Model: { minTemp: 0, maxTemp: 100, currentTemp: 75 } -->
<meter value=""
min=""
max="">
°C
</meter>
Calculated Ranges
<!-- Model: { baseValue: 100, multiplier: 10 } -->
<meter value=""
min="0"
max="">
50%
</meter>
Conditional Ranges
<!-- Model: { isMetric: true, value: 30 } -->
<meter value=""
min="0"
max="">
</meter>
Dynamic Input Constraints
<!-- Model: { quantity: 5, minOrder: 1, maxStock: 20 } -->
<input type="number"
value=""
min=""
max="" />
Repeating Elements with Varying Ranges
<!-- Model: { metrics: [
{name: "CPU", value: 45, min: 0, max: 100},
{name: "Memory", value: 3.2, min: 0, max: 8},
{name: "Disk", value: 450, min: 0, max: 1000}
] } -->
<template data-bind="">
<div style="margin-bottom: 10pt;">
<strong>:</strong>
<meter value="" min="content<h1 id="media--the-media-query-attribute">@media : The Media Query Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute specifies media queries that determine when styles or resources should be applied. Used primarily with <code class="language-plaintext highlighter-rouge"><link></code> and <code class="language-plaintext highlighter-rouge"><style></code> elements, it enables conditional CSS loading based on output characteristics. In PDF generation context, it allows creating print-optimized styles and responsive layouts tailored for different page sizes.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute defines media-specific conditions:</p>
<ul>
<li>Specifies when linked stylesheets or style blocks should apply</li>
<li>Uses CSS media query syntax for conditional styling</li>
<li>Common for <code class="language-plaintext highlighter-rouge">print</code> vs <code class="language-plaintext highlighter-rouge">screen</code> differentiation</li>
<li>Supports page size, orientation, and dimension queries</li>
<li>In PDF context, primarily used with <code class="language-plaintext highlighter-rouge">print</code> media type</li>
<li>Supports data binding for dynamic media selection</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Orientation-specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span> <span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Page size-specific --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Dynamic media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute is used with:</p>
<h3 id="link-element">Link Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><link></code> - External stylesheet loading with media conditions (primary use)</li>
</ul>
<h3 id="style-element">Style Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><style></code> - Inline CSS with media conditions</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute supports data binding for dynamic media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic media query --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Conditional media type --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Dynamic page size --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">""</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Repeating stylesheets with different media --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Configuration-based media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"layout.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: )"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"stylePath"</span><span class="p">:</span><span class="w"> </span><span class="s2">"custom.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"targetMedia"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isPrint"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"mediaQuery"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print and (orientation: portrait)"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageSize"</span><span class="p">:</span><span class="w"> </span><span class="s2">"A4"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageMargin"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2cm"</span><span class="p">,</span><span class="w">
</span><span class="nl">"stylesheets"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"base.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"all"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"orientation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"landscape"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="media-types">Media Types</h3>
<p>Standard media types for PDF generation:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print media (most common for PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen media (generally not applicable to PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="nt">/></span> <span class="c"><!-- Same as media="all" --></span>
</code></pre></div></div>
<p><strong>PDF Context:</strong></p>
<ul>
<li>PDFs are considered <code class="language-plaintext highlighter-rouge">print</code> media</li>
<li><code class="language-plaintext highlighter-rouge">screen</code> media queries typically don’t apply</li>
<li><code class="language-plaintext highlighter-rouge">all</code> applies to both print and screen</li>
<li>Use <code class="language-plaintext highlighter-rouge">print</code> for PDF-specific styles</li>
</ul>
<h3 id="print-media-queries">Print Media Queries</h3>
<p>Common print-specific media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Basic print stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Portrait orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Landscape orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Minimum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"wide.css"</span>
<span class="na">media=</span><span class="s">"print and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Maximum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"narrow.css"</span>
<span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Specific dimensions --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="page-size-media-features">Page Size Media Features</h3>
<p>Target specific page dimensions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- A4 size (210mm × 297mm) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size (8.5in × 11in) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Large format --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="orientation-media-queries">Orientation Media Queries</h3>
<p>Handle portrait vs landscape:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Portrait-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="multiple-media-queries">Multiple Media Queries</h3>
<p>Combine multiple conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- AND operator (both conditions must be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Comma (OR operator - any condition can be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print, screen"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"large.css"</span>
<span class="na">media=</span><span class="s">"(min-width: 800pt), (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- NOT operator --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"not-small.css"</span>
<span class="na">media=</span><span class="s">"not (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Complex combination --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"complex.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt),
print and (min-height: 1000pt)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="resolution-media-queries">Resolution Media Queries</h3>
<p>Target different print resolutions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- High resolution printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="n">high-quality</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Standard resolution --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-resolution: 150dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Alternative resolution units --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 2dppx)"</span><span class="nt">></span>
<span class="c">/* Styles for high-density output */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome">Color vs Monochrome</h3>
<p>Differentiate between color and monochrome output:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Color printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Specific color depth --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-color: 8)"</span><span class="nt">></span>
<span class="c">/* 8-bit color or higher */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="default-behavior">Default Behavior</h3>
<p>When no media attribute is specified:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No media specified - applies to all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="nt">/></span>
<span class="c"><!-- Explicitly stating all media (same result) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="media-attribute-vs-media-rule">Media Attribute vs @media Rule</h3>
<p>Two ways to specify media conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Method 1: media attribute on link --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Method 2: @media rule in CSS --></span>
<span class="nt"><style></span>
<span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Method 3: Combined approach --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- styles.css can also contain @media rules --></span>
</code></pre></div></div>
<h3 id="invalid-media-queries">Invalid Media Queries</h3>
<p>Handle invalid queries gracefully:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Valid --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"valid.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Invalid media type (ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"invalid.css"</span> <span class="na">media=</span><span class="s">"invalid-type"</span> <span class="nt">/></span>
<span class="c"><!-- Malformed query (may be ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"malformed.css"</span> <span class="na">media=</span><span class="s">"prin"</span> <span class="nt">/></span>
<span class="c"><!-- Always test your media queries --></span>
</code></pre></div></div>
<h3 id="pdf-specific-considerations">PDF-Specific Considerations</h3>
<p>For PDF generation with Scryber:</p>
<ol>
<li><strong>Use <code class="language-plaintext highlighter-rouge">print</code> media type</strong> for PDF-specific styles</li>
<li><strong>Avoid <code class="language-plaintext highlighter-rouge">screen</code> media</strong> as PDFs are print context</li>
<li><strong>Page size queries</strong> are useful for multi-format PDFs</li>
<li><strong>Orientation queries</strong> help with layout variations</li>
<li><strong><code class="language-plaintext highlighter-rouge">@page</code> rules</strong> should be in <code class="language-plaintext highlighter-rouge">print</code> media</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Recommended for PDF --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-print-stylesheet">Basic Print Stylesheet</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document with Print Styles<span class="nt"></title></span>
<span class="c"><!-- Common styles for all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-specific styles --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific styles (not used in PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document Title<span class="nt"></h1></span>
<span class="nt"><p></span>This document has different styles for print and screen.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="inline-print-styles">Inline Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Print-Optimized Document<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">" ("</span> <span class="n">attr</span><span class="p">(</span><span class="n">href</span><span class="p">)</span> <span class="s1">")"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Professional Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"no-print"</span><span class="nt">></span>
<span class="nt"><p></span>This section only appears on screen, not in print.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>
This document is optimized for printing.
Visit our <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>website<span class="nt"></a></span> for more information.
<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="orientation-specific-styles">Orientation-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Orientation-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Portrait styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Flexible Layout<span class="nt"></h1></span>
<span class="nt"><p></span>This layout adapts to page orientation.<span class="nt"></p></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 1<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 2<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 3<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 1<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 2<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 3<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="page-size-specific-styles">Page Size-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Format Document<span class="nt"></title></span>
<span class="c"><!-- A4 size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">170mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">letter</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">6.5in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Legal size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 14in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">legal</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content-wrapper"</span><span class="nt">></span>
<span class="nt"><h1></span>Adaptive Document<span class="nt"></h1></span>
<span class="nt"><p></span>This document adapts its layout based on page size.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome-1">Color vs Monochrome</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Color-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Color printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.warning</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff3cd</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#ffc107</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#856404</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#d4edda</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#28a745</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#155724</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8d7da</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#dc3545</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#721c24</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.warning</span><span class="o">,</span> <span class="nc">.success</span><span class="o">,</span> <span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"⚠ WARNING: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✓ SUCCESS: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✗ ERROR: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Status Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"success"</span><span class="nt">></span>
All systems operating normally.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"warning"</span><span class="nt">></span>
Minor performance degradation detected.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"error"</span><span class="nt">></span>
Critical failure in backup system.
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="wide-vs-narrow-layouts">Wide vs Narrow Layouts</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Responsive Print Layout<span class="nt"></title></span>
<span class="c"><!-- Narrow pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Wide pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">200pt</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">220pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span><span class="nt">></span>
<span class="nt"><h3></span>Navigation<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span><span class="nt">></span>Section 1<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span><span class="nt">></span>Section 2<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Main Content<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"two-column"</span><span class="nt">></span>
<span class="nt"><p></span>This content will display in two columns on wide pages
and one column on narrow pages.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="multiple-conditional-stylesheets">Multiple Conditional Stylesheets</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Conditional Document<span class="nt"></title></span>
<span class="c"><!-- Base styles for all --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"base.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-only base --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print-base.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Print portrait --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Print landscape --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- A4 specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm)"</span> <span class="nt">/></span>
<span class="c"><!-- Letter specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"letter.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span> <span class="nt">/></span>
<span class="c"><!-- High resolution --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"high-res.css"</span>
<span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Comprehensive Media Queries<span class="nt"></h1></span>
<span class="nt"><p></span>This document uses multiple conditional stylesheets.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="data-bound-media-queries">Data-Bound Media Queries</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
pageSize: "A4",
orientation: "portrait",
stylesheets: [
{ url: "base.css", media: "all" },
{ url: "print.css", media: "print" },
{ url: "portrait.css", media: "print and (orientation: portrait)" }
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Dynamic Media Queries<span class="nt"></title></span>
<span class="c"><!-- Dynamic stylesheets --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Dynamic page setup --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document with Dynamic Media Configuration<span class="nt"></h1></span>
<span class="nt"><p></span>Page size: <span class="nt"></p></span>
<span class="nt"><p></span>Orientation: <span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="report-with-print-optimization">Report with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Annual Report 2025<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="err">@top-center</span> <span class="err">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Annual Report 2025"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@bottom-right</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Page "</span> <span class="n">counter</span><span class="p">(</span><span class="n">page</span><span class="p">)</span> <span class="s1">" of "</span> <span class="n">counter</span><span class="p">(</span><span class="n">pages</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f2f2f2</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart</span> <span class="p">{</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.page-break</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><h2></span>Executive Summary<span class="nt"></h2></span>
<span class="nt"><p></span>Financial performance exceeded expectations...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-break"</span><span class="nt">></div></span>
<span class="nt"><h2></span>Financial Results<span class="nt"></h2></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Quarter<span class="nt"></th></span>
<span class="nt"><th></span>Revenue<span class="nt"></th></span>
<span class="nt"><th></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q1<span class="nt"></td></span>
<span class="nt"><td></span>$1.2M<span class="nt"></td></span>
<span class="nt"><td></span>15%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q2<span class="nt"></td></span>
<span class="nt"><td></span>$1.4M<span class="nt"></td></span>
<span class="nt"><td></span>18%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="invoice-with-print-styles">Invoice with Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Invoice #12345<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-header</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-between</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-details</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.total-row</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.payment-terms</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-header"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>INVOICE<span class="nt"></h1></span>
<span class="nt"><p><strong></span>Invoice #:<span class="nt"></strong></span> 12345<span class="nt"></p></span>
<span class="nt"><p><strong></span>Date:<span class="nt"></strong></span> January 15, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Company Name<span class="nt"></strong></p></span>
<span class="nt"><p></span>123 Business St<span class="nt"></p></span>
<span class="nt"><p></span>City, State 12345<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-details"</span><span class="nt">></span>
<span class="nt"><h3></span>Bill To:<span class="nt"></h3></span>
<span class="nt"><p></span>Client Name<span class="nt"><br/></span>
456 Client Ave<span class="nt"><br/></span>
City, State 67890<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Description<span class="nt"></th></span>
<span class="nt"><th></span>Quantity<span class="nt"></th></span>
<span class="nt"><th></span>Unit Price<span class="nt"></th></span>
<span class="nt"><th></span>Total<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service A<span class="nt"></td></span>
<span class="nt"><td></span>10<span class="nt"></td></span>
<span class="nt"><td></span>$100.00<span class="nt"></td></span>
<span class="nt"><td></span>$1,000.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service B<span class="nt"></td></span>
<span class="nt"><td></span>5<span class="nt"></td></span>
<span class="nt"><td></span>$150.00<span class="nt"></td></span>
<span class="nt"><td></span>$750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">class=</span><span class="s">"total-row"</span><span class="nt">></span>
<span class="nt"><td</span> <span class="na">colspan=</span><span class="s">"3"</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>TOTAL:<span class="nt"></td></span>
<span class="nt"><td></span>$1,750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"payment-terms"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Payment Terms:<span class="nt"></strong></span> Net 30 days<span class="nt"></p></span>
<span class="nt"><p><strong></span>Due Date:<span class="nt"></strong></span> February 14, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="certificate-with-print-optimization">Certificate with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Certificate of Completion<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">210mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.certificate</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">250mm</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">10pt</span> <span class="nb">double</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">36pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Georgia'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipient</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.details</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature-line</span> <span class="p">{</span>
<span class="nl">border-top</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"certificate"</span><span class="nt">></span>
<span class="nt"><h1></span>Certificate of Completion<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>This is to certify that<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"recipient"</span><span class="nt">></span>John Doe<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>
has successfully completed the course<span class="nt"><br/></span>
<span class="nt"><strong></span>Advanced PDF Generation<span class="nt"></strong><br/></span>
on January 15, 2025
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Instructor<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Director<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/link.html">link</a> - Link element for stylesheets</li>
<li><a href="/reference/htmltags/style.html">style</a> - Inline style element</li>
<li><a href="/reference/htmlattributes/rel.html">rel</a> - Relationship attribute for link element</li>
<li><a href="/reference/css/media.html">@media</a> - CSS media queries</li>
<li><a href="/reference/css/page.html">@page</a> - Page rules for print</li>
<li><a href="/reference/styles/">CSS Styles</a> - Complete CSS reference</li>
</ul>
<hr />
" max="themeJekyll::Drops::ThemeDrop"
style="width: 200pt; height: 20pt;">
</meter>
</div>
</template>
Notes
Valid Range Requirements
The max value must be greater than min:
<!-- Valid: max > min -->
<meter value="50" min="0" max="100">50%</meter>
<!-- Invalid: max < min (may cause errors or unexpected behavior) -->
<meter value="50" min="100" max="0">Invalid</meter>
<!-- Invalid: max = min (division by zero) -->
<meter value="50" min="50" max="50">Invalid</meter>
Negative Ranges
Negative values are fully supported:
<!-- Temperature in Celsius -->
<meter value="-5" min="-20" max="40">-5°C</meter>
<!-- Financial loss/profit -->
<meter value="-500" min="-1000" max="1000" optimum="1000">
-$500
</meter>
<!-- Elevation below sea level -->
<meter value="-85" min="-100" max="100">-85m</meter>
Decimal Precision
Both min and max support decimal values:
<!-- Fractional range -->
<meter value="0.667" min="0" max="1">66.7%</meter>
<!-- Decimal measurement -->
<meter value="3.14159" min="0" max="10">π</meter>
<!-- Currency with cents -->
<meter value="19.99" min="0" max="50">$19.99</meter>
<!-- Scientific notation -->
<meter value="6.022e23" min="0" max="1e24">Avogadro's number</meter>
Large Value Ranges
The attributes handle large numeric ranges:
<!-- Large integers -->
<meter value="1500000" min="0" max="10000000">
1.5 million
</meter>
<!-- Population data -->
<meter value="8000000000" min="0" max="10000000000">
8 billion people
</meter>
<!-- Bytes to Gigabytes -->
<meter value="4294967296" min="0" max="10737418240">
4 GB
</meter>
Offset Ranges
Ranges don’t need to start at zero:
<!-- Percentage range 50-100% -->
<meter value="75" min="50" max="100">75%</meter>
<!-- Year range -->
<meter value="2024" min="2000" max="2050">2024</meter>
<!-- pH scale (0-14, showing 7-10) -->
<meter value="8.5" min="7" max="10">pH 8.5</meter>
<!-- Speed range 60-120 mph -->
<meter value="95" min="60" max="120">95 mph</meter>
Progress Bar Behavior
For progress bars, min is typically 0:
<!-- Standard progress: 0-100 -->
<progress value="45" min="0" max="100">45%</progress>
<!-- Task completion: 0-10 steps -->
<progress value="7" min="0" max="10">7/10</progress>
<!-- Download: 0 to file size -->
<progress value="75" min="0" max="100">75 MB</progress>
Meter vs Progress Ranges
Key differences in range usage:
| Feature | <meter> |
<progress> |
|---|---|---|
| Default min | 0 | 0 |
| Default max | 1 | 1 |
| Negative values | Supported | Rarely used |
| Offset ranges | Common (e.g., 50-100) | Uncommon |
| Threshold interaction | Yes (low/high/optimum) | No |
| Typical range | Any measurement scale | 0 to completion value |
Threshold Constraints
When using low/high/optimum with meters:
<!-- Thresholds must be within min/max range -->
<meter value="75" min="0" max="100" low="30" high="80" optimum="50">
Valid: all thresholds within 0-100
</meter>
<!-- Invalid: high exceeds max -->
<meter value="75" min="0" max="100" low="30" high="120" optimum="50">
Invalid: high > max
</meter>
<!-- Invalid: low below min -->
<meter value="75" min="10" max="100" low="5" high="80" optimum="50">
Invalid: low < min
</meter>
Units and Formatting
Min/max are numeric values without units:
<!-- Values are numbers, labels provide context -->
<meter value="75" min="0" max="100">75°C</meter>
<meter value="75" min="0" max="100">$75</meter>
<meter value="75" min="0" max="100">75 kg</meter>
<meter value="75" min="0" max="100">75%</meter>
<!-- Format in label or surrounding text -->
<label>Temperature: </label>
<meter value="75" min="0" max="100">75</meter>
<span> °C</span>
Visual Rendering Impact
The range affects visual fill calculation:
<!-- Same visual appearance (50% fill) -->
<meter value="50" min="0" max="100"
style="width: 200pt; height: 20pt;">50%</meter>
<meter value="5" min="0" max="10"
style="width: 200pt; height: 20pt;">50%</meter>
<meter value="0.5" min="0" max="1"
style="width: 200pt; height: 20pt;">50%</meter>
Examples
Basic Percentage Meter (0-100)
<!-- Standard percentage meter -->
<div style="margin-bottom: 15pt;">
<label style="display: block; font-weight: bold; margin-bottom: 5pt;">
Disk Usage
</label>
<meter value="75" min="0" max="100" low="30" high="80" optimum="20"
style="width: 300pt; height: 24pt;">
75%
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
75 GB of 100 GB used
</p>
</div>
Fractional Range (0-1)
<!-- Decimal range for percentages -->
<div style="margin-bottom: 15pt;">
<label style="display: block; font-weight: bold; margin-bottom: 5pt;">
Completion Rate
</label>
<meter value="0.67" min="0" max="1" low="0.3" high="0.8" optimum="1"
style="width: 250pt; height: 20pt;">
67%
</meter>
<span style="margin-left: 10pt;">0.67 (67%)</span>
</div>
Custom Score Range (0-10)
<!-- Rating out of 10 -->
<div style="margin-bottom: 15pt;">
<label style="display: block; font-weight: bold; margin-bottom: 5pt;">
Customer Satisfaction Score
</label>
<meter value="8.5" min="0" max="10" low="4" high="7" optimum="10"
style="width: 300pt; height: 22pt;">
8.5/10
</meter>
<span style="margin-left: 10pt; color: green; font-weight: bold;">
Excellent (8.5/10)
</span>
</div>
Temperature Range with Negatives
<!-- Temperature gauge with negative values -->
<div style="padding: 15pt; background-color: #f5f5f5; border-radius: 6pt;">
<h4 style="margin: 0 0 15pt 0;">Temperature Monitoring</h4>
<div style="margin-bottom: 12pt;">
<strong>Freezer:</strong>
<meter value="-18" min="-30" max="10" low="-20" high="0" optimum="-18"
style="width: 200pt; height: 20pt; margin-left: 10pt;">
-18°C
</meter>
<span style="margin-left: 10pt;">-18°C (Optimal)</span>
</div>
<div style="margin-bottom: 12pt;">
<strong>Refrigerator:</strong>
<meter value="4" min="-5" max="15" low="2" high="8" optimum="4"
style="width: 200pt; height: 20pt; margin-left: 10pt;">
4°C
</meter>
<span style="margin-left: 10pt;">4°C (Optimal)</span>
</div>
<div style="margin-bottom: 0;">
<strong>Room:</strong>
<meter value="22" min="10" max="35" low="18" high="26" optimum="22"
style="width: 200pt; height: 20pt; margin-left: 10pt;">
22°C
</meter>
<span style="margin-left: 10pt;">22°C (Optimal)</span>
</div>
</div>
Progress Bar with Custom Range
<!-- File download with specific byte range -->
<div style="border: 1pt solid #ddd; padding: 15pt; border-radius: 6pt;">
<h4 style="margin: 0 0 10pt 0;">Downloading large-file.zip</h4>
<progress value="750" min="0" max="1200"
style="width: 100%; height: 28pt; border: 1pt solid #ccc; border-radius: 14pt;">
750 MB
</progress>
<div style="margin-top: 8pt; color: #666; font-size: 9pt;">
<span style="float: left;">750 MB of 1,200 MB</span>
<span style="float: right;">62.5% complete</span>
<div style="clear: both;"></div>
</div>
</div>
Battery Level (0-100 mAh)
<!-- Battery capacity meter -->
<div style="border: 2pt solid #333; border-radius: 8pt; padding: 20pt; width: 350pt;">
<h3 style="margin: 0 0 15pt 0;">Device Battery Status</h3>
<div style="margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: bold;">
Laptop Battery
</p>
<meter value="4500" min="0" max="5000" low="1000" high="3500" optimum="5000"
style="width: 100%; height: 24pt; border: 1pt solid #666; border-radius: 4pt;">
4500 mAh
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
4,500 mAh of 5,000 mAh (90%)
</p>
</div>
<div style="margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: bold;">
Phone Battery
</p>
<meter value="1800" min="0" max="3000" low="600" high="2000" optimum="3000"
style="width: 100%; height: 24pt; border: 1pt solid #666; border-radius: 4pt;">
1800 mAh
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
1,800 mAh of 3,000 mAh (60%)
</p>
</div>
<div style="margin-bottom: 0;">
<p style="margin: 0 0 8pt 0; font-weight: bold;">
Tablet Battery
</p>
<meter value="650" min="0" max="7000" low="1400" high="5000" optimum="7000"
style="width: 100%; height: 24pt; border: 1pt solid #666; border-radius: 4pt;">
650 mAh
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #d32f2f;">
650 mAh of 7,000 mAh (9.3% - Low Battery!)
</p>
</div>
</div>
Financial Range (Profit/Loss)
<!-- Profit and loss meter -->
<div style="padding: 20pt; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; border-radius: 10pt;">
<h3 style="margin: 0 0 20pt 0;">Quarterly Financial Performance</h3>
<div style="background-color: rgba(255,255,255,0.15); padding: 15pt;
border-radius: 6pt; margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: bold;">Q1 2024</p>
<meter value="250000" min="-500000" max="1000000"
low="0" high="500000" optimum="1000000"
style="width: 100%; height: 26pt; border: 2pt solid rgba(255,255,255,0.3);">
+$250K
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; opacity: 0.9;">
Profit: $250,000
</p>
</div>
<div style="background-color: rgba(255,255,255,0.15); padding: 15pt;
border-radius: 6pt; margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: bold;">Q2 2024</p>
<meter value="-150000" min="-500000" max="1000000"
low="0" high="500000" optimum="1000000"
style="width: 100%; height: 26pt; border: 2pt solid rgba(255,255,255,0.3);">
-$150K
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; opacity: 0.9;">
Loss: $150,000
</p>
</div>
<div style="background-color: rgba(255,255,255,0.15); padding: 15pt;
border-radius: 6pt;">
<p style="margin: 0 0 8pt 0; font-weight: bold;">Q3 2024</p>
<meter value="750000" min="-500000" max="1000000"
low="0" high="500000" optimum="1000000"
style="width: 100%; height: 26pt; border: 2pt solid rgba(255,255,255,0.3);">
+$750K
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; opacity: 0.9;">
Profit: $750,000 (Record Quarter!)
</p>
</div>
</div>
Year Range (2000-2050)
<!-- Timeline progress meter -->
<div style="border: 1pt solid #ddd; padding: 20pt; border-radius: 8pt;">
<h3 style="margin: 0 0 15pt 0;">Project Timeline: 2020-2030</h3>
<div style="margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: 600;">Current Progress</p>
<meter value="2024" min="2020" max="2030" low="2022" high="2028" optimum="2030"
style="width: 100%; height: 28pt; border: 1pt solid #336699;">
2024
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
Year 2024 - 40% through project timeline (4 of 10 years)
</p>
</div>
<div style="background-color: #f9f9f9; padding: 12pt; border-radius: 4pt;">
<table style="width: 100%; font-size: 9pt;">
<tr>
<td style="padding: 4pt;"><strong>Start:</strong></td>
<td style="padding: 4pt;">2020</td>
</tr>
<tr>
<td style="padding: 4pt;"><strong>Current:</strong></td>
<td style="padding: 4pt;">2024</td>
</tr>
<tr>
<td style="padding: 4pt;"><strong>Target Completion:</strong></td>
<td style="padding: 4pt;">2030</td>
</tr>
<tr>
<td style="padding: 4pt;"><strong>Years Remaining:</strong></td>
<td style="padding: 4pt; color: #336699; font-weight: bold;">6 years</td>
</tr>
</table>
</div>
</div>
Speed Gauge (0-200 mph)
<!-- Vehicle speedometer -->
<div style="text-align: center; padding: 25pt; background-color: #1a1a1a;
color: white; border-radius: 12pt;">
<h2 style="margin: 0 0 20pt 0; color: #00ff00;">Speed Gauge</h2>
<div style="margin-bottom: 15pt;">
<p style="margin: 0 0 10pt 0; font-size: 12pt;">Current Speed</p>
<meter value="75" min="0" max="200" low="60" high="120" optimum="65"
style="width: 400pt; height: 40pt; border: 3pt solid #333;
border-radius: 20pt;">
75 mph
</meter>
<p style="margin: 15pt 0 0 0; font-size: 32pt; font-weight: bold;
color: #00ff00;">
75 MPH
</p>
</div>
<div style="margin-top: 20pt; padding-top: 15pt;
border-top: 1pt solid rgba(255,255,255,0.2); font-size: 10pt;">
<span style="margin: 0 15pt;">Min: 0</span>
<span style="margin: 0 15pt;">Safe Range: 60-120</span>
<span style="margin: 0 15pt;">Max: 200</span>
</div>
</div>
Data-Bound Dynamic Ranges
<!-- Model: {
metrics: [
{name: "CPU Usage", value: 45, min: 0, max: 100, unit: "%"},
{name: "Memory", value: 6.2, min: 0, max: 16, unit: " GB"},
{name: "Disk Space", value: 450, min: 0, max: 1000, unit: " GB"},
{name: "Temperature", value: 72, min: 20, max: 100, unit: "°C"}
]
} -->
<div style="padding: 20pt;">
<h3 style="margin: 0 0 20pt 0;">System Metrics</h3>
<template data-bind="">
<div style="margin-bottom: 18pt; padding: 12pt; border: 1pt solid #e0e0e0;
border-radius: 6pt; background-color: #fafafa;">
<div style="margin-bottom: 8pt;">
<strong style="font-size: 11pt;"></strong>
<span style="float: right; color: #666; font-weight: bold;">
</span>
<div style="clear: both;"></div>
</div>
<meter value="" min="content<h1 id="media--the-media-query-attribute">@media : The Media Query Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute specifies media queries that determine when styles or resources should be applied. Used primarily with <code class="language-plaintext highlighter-rouge"><link></code> and <code class="language-plaintext highlighter-rouge"><style></code> elements, it enables conditional CSS loading based on output characteristics. In PDF generation context, it allows creating print-optimized styles and responsive layouts tailored for different page sizes.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute defines media-specific conditions:</p>
<ul>
<li>Specifies when linked stylesheets or style blocks should apply</li>
<li>Uses CSS media query syntax for conditional styling</li>
<li>Common for <code class="language-plaintext highlighter-rouge">print</code> vs <code class="language-plaintext highlighter-rouge">screen</code> differentiation</li>
<li>Supports page size, orientation, and dimension queries</li>
<li>In PDF context, primarily used with <code class="language-plaintext highlighter-rouge">print</code> media type</li>
<li>Supports data binding for dynamic media selection</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Orientation-specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span> <span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Page size-specific --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Dynamic media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute is used with:</p>
<h3 id="link-element">Link Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><link></code> - External stylesheet loading with media conditions (primary use)</li>
</ul>
<h3 id="style-element">Style Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><style></code> - Inline CSS with media conditions</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute supports data binding for dynamic media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic media query --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Conditional media type --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Dynamic page size --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">""</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Repeating stylesheets with different media --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Configuration-based media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"layout.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: )"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"stylePath"</span><span class="p">:</span><span class="w"> </span><span class="s2">"custom.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"targetMedia"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isPrint"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"mediaQuery"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print and (orientation: portrait)"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageSize"</span><span class="p">:</span><span class="w"> </span><span class="s2">"A4"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageMargin"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2cm"</span><span class="p">,</span><span class="w">
</span><span class="nl">"stylesheets"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"base.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"all"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"orientation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"landscape"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="media-types">Media Types</h3>
<p>Standard media types for PDF generation:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print media (most common for PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen media (generally not applicable to PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="nt">/></span> <span class="c"><!-- Same as media="all" --></span>
</code></pre></div></div>
<p><strong>PDF Context:</strong></p>
<ul>
<li>PDFs are considered <code class="language-plaintext highlighter-rouge">print</code> media</li>
<li><code class="language-plaintext highlighter-rouge">screen</code> media queries typically don’t apply</li>
<li><code class="language-plaintext highlighter-rouge">all</code> applies to both print and screen</li>
<li>Use <code class="language-plaintext highlighter-rouge">print</code> for PDF-specific styles</li>
</ul>
<h3 id="print-media-queries">Print Media Queries</h3>
<p>Common print-specific media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Basic print stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Portrait orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Landscape orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Minimum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"wide.css"</span>
<span class="na">media=</span><span class="s">"print and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Maximum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"narrow.css"</span>
<span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Specific dimensions --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="page-size-media-features">Page Size Media Features</h3>
<p>Target specific page dimensions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- A4 size (210mm × 297mm) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size (8.5in × 11in) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Large format --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="orientation-media-queries">Orientation Media Queries</h3>
<p>Handle portrait vs landscape:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Portrait-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="multiple-media-queries">Multiple Media Queries</h3>
<p>Combine multiple conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- AND operator (both conditions must be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Comma (OR operator - any condition can be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print, screen"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"large.css"</span>
<span class="na">media=</span><span class="s">"(min-width: 800pt), (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- NOT operator --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"not-small.css"</span>
<span class="na">media=</span><span class="s">"not (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Complex combination --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"complex.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt),
print and (min-height: 1000pt)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="resolution-media-queries">Resolution Media Queries</h3>
<p>Target different print resolutions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- High resolution printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="n">high-quality</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Standard resolution --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-resolution: 150dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Alternative resolution units --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 2dppx)"</span><span class="nt">></span>
<span class="c">/* Styles for high-density output */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome">Color vs Monochrome</h3>
<p>Differentiate between color and monochrome output:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Color printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Specific color depth --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-color: 8)"</span><span class="nt">></span>
<span class="c">/* 8-bit color or higher */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="default-behavior">Default Behavior</h3>
<p>When no media attribute is specified:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No media specified - applies to all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="nt">/></span>
<span class="c"><!-- Explicitly stating all media (same result) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="media-attribute-vs-media-rule">Media Attribute vs @media Rule</h3>
<p>Two ways to specify media conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Method 1: media attribute on link --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Method 2: @media rule in CSS --></span>
<span class="nt"><style></span>
<span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Method 3: Combined approach --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- styles.css can also contain @media rules --></span>
</code></pre></div></div>
<h3 id="invalid-media-queries">Invalid Media Queries</h3>
<p>Handle invalid queries gracefully:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Valid --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"valid.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Invalid media type (ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"invalid.css"</span> <span class="na">media=</span><span class="s">"invalid-type"</span> <span class="nt">/></span>
<span class="c"><!-- Malformed query (may be ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"malformed.css"</span> <span class="na">media=</span><span class="s">"prin"</span> <span class="nt">/></span>
<span class="c"><!-- Always test your media queries --></span>
</code></pre></div></div>
<h3 id="pdf-specific-considerations">PDF-Specific Considerations</h3>
<p>For PDF generation with Scryber:</p>
<ol>
<li><strong>Use <code class="language-plaintext highlighter-rouge">print</code> media type</strong> for PDF-specific styles</li>
<li><strong>Avoid <code class="language-plaintext highlighter-rouge">screen</code> media</strong> as PDFs are print context</li>
<li><strong>Page size queries</strong> are useful for multi-format PDFs</li>
<li><strong>Orientation queries</strong> help with layout variations</li>
<li><strong><code class="language-plaintext highlighter-rouge">@page</code> rules</strong> should be in <code class="language-plaintext highlighter-rouge">print</code> media</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Recommended for PDF --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-print-stylesheet">Basic Print Stylesheet</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document with Print Styles<span class="nt"></title></span>
<span class="c"><!-- Common styles for all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-specific styles --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific styles (not used in PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document Title<span class="nt"></h1></span>
<span class="nt"><p></span>This document has different styles for print and screen.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="inline-print-styles">Inline Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Print-Optimized Document<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">" ("</span> <span class="n">attr</span><span class="p">(</span><span class="n">href</span><span class="p">)</span> <span class="s1">")"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Professional Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"no-print"</span><span class="nt">></span>
<span class="nt"><p></span>This section only appears on screen, not in print.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>
This document is optimized for printing.
Visit our <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>website<span class="nt"></a></span> for more information.
<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="orientation-specific-styles">Orientation-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Orientation-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Portrait styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Flexible Layout<span class="nt"></h1></span>
<span class="nt"><p></span>This layout adapts to page orientation.<span class="nt"></p></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 1<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 2<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 3<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 1<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 2<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 3<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="page-size-specific-styles">Page Size-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Format Document<span class="nt"></title></span>
<span class="c"><!-- A4 size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">170mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">letter</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">6.5in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Legal size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 14in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">legal</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content-wrapper"</span><span class="nt">></span>
<span class="nt"><h1></span>Adaptive Document<span class="nt"></h1></span>
<span class="nt"><p></span>This document adapts its layout based on page size.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome-1">Color vs Monochrome</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Color-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Color printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.warning</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff3cd</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#ffc107</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#856404</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#d4edda</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#28a745</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#155724</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8d7da</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#dc3545</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#721c24</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.warning</span><span class="o">,</span> <span class="nc">.success</span><span class="o">,</span> <span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"⚠ WARNING: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✓ SUCCESS: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✗ ERROR: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Status Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"success"</span><span class="nt">></span>
All systems operating normally.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"warning"</span><span class="nt">></span>
Minor performance degradation detected.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"error"</span><span class="nt">></span>
Critical failure in backup system.
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="wide-vs-narrow-layouts">Wide vs Narrow Layouts</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Responsive Print Layout<span class="nt"></title></span>
<span class="c"><!-- Narrow pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Wide pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">200pt</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">220pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span><span class="nt">></span>
<span class="nt"><h3></span>Navigation<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span><span class="nt">></span>Section 1<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span><span class="nt">></span>Section 2<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Main Content<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"two-column"</span><span class="nt">></span>
<span class="nt"><p></span>This content will display in two columns on wide pages
and one column on narrow pages.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="multiple-conditional-stylesheets">Multiple Conditional Stylesheets</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Conditional Document<span class="nt"></title></span>
<span class="c"><!-- Base styles for all --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"base.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-only base --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print-base.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Print portrait --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Print landscape --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- A4 specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm)"</span> <span class="nt">/></span>
<span class="c"><!-- Letter specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"letter.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span> <span class="nt">/></span>
<span class="c"><!-- High resolution --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"high-res.css"</span>
<span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Comprehensive Media Queries<span class="nt"></h1></span>
<span class="nt"><p></span>This document uses multiple conditional stylesheets.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="data-bound-media-queries">Data-Bound Media Queries</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
pageSize: "A4",
orientation: "portrait",
stylesheets: [
{ url: "base.css", media: "all" },
{ url: "print.css", media: "print" },
{ url: "portrait.css", media: "print and (orientation: portrait)" }
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Dynamic Media Queries<span class="nt"></title></span>
<span class="c"><!-- Dynamic stylesheets --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Dynamic page setup --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document with Dynamic Media Configuration<span class="nt"></h1></span>
<span class="nt"><p></span>Page size: <span class="nt"></p></span>
<span class="nt"><p></span>Orientation: <span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="report-with-print-optimization">Report with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Annual Report 2025<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="err">@top-center</span> <span class="err">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Annual Report 2025"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@bottom-right</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Page "</span> <span class="n">counter</span><span class="p">(</span><span class="n">page</span><span class="p">)</span> <span class="s1">" of "</span> <span class="n">counter</span><span class="p">(</span><span class="n">pages</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f2f2f2</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart</span> <span class="p">{</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.page-break</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><h2></span>Executive Summary<span class="nt"></h2></span>
<span class="nt"><p></span>Financial performance exceeded expectations...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-break"</span><span class="nt">></div></span>
<span class="nt"><h2></span>Financial Results<span class="nt"></h2></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Quarter<span class="nt"></th></span>
<span class="nt"><th></span>Revenue<span class="nt"></th></span>
<span class="nt"><th></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q1<span class="nt"></td></span>
<span class="nt"><td></span>$1.2M<span class="nt"></td></span>
<span class="nt"><td></span>15%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q2<span class="nt"></td></span>
<span class="nt"><td></span>$1.4M<span class="nt"></td></span>
<span class="nt"><td></span>18%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="invoice-with-print-styles">Invoice with Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Invoice #12345<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-header</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-between</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-details</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.total-row</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.payment-terms</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-header"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>INVOICE<span class="nt"></h1></span>
<span class="nt"><p><strong></span>Invoice #:<span class="nt"></strong></span> 12345<span class="nt"></p></span>
<span class="nt"><p><strong></span>Date:<span class="nt"></strong></span> January 15, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Company Name<span class="nt"></strong></p></span>
<span class="nt"><p></span>123 Business St<span class="nt"></p></span>
<span class="nt"><p></span>City, State 12345<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-details"</span><span class="nt">></span>
<span class="nt"><h3></span>Bill To:<span class="nt"></h3></span>
<span class="nt"><p></span>Client Name<span class="nt"><br/></span>
456 Client Ave<span class="nt"><br/></span>
City, State 67890<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Description<span class="nt"></th></span>
<span class="nt"><th></span>Quantity<span class="nt"></th></span>
<span class="nt"><th></span>Unit Price<span class="nt"></th></span>
<span class="nt"><th></span>Total<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service A<span class="nt"></td></span>
<span class="nt"><td></span>10<span class="nt"></td></span>
<span class="nt"><td></span>$100.00<span class="nt"></td></span>
<span class="nt"><td></span>$1,000.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service B<span class="nt"></td></span>
<span class="nt"><td></span>5<span class="nt"></td></span>
<span class="nt"><td></span>$150.00<span class="nt"></td></span>
<span class="nt"><td></span>$750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">class=</span><span class="s">"total-row"</span><span class="nt">></span>
<span class="nt"><td</span> <span class="na">colspan=</span><span class="s">"3"</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>TOTAL:<span class="nt"></td></span>
<span class="nt"><td></span>$1,750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"payment-terms"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Payment Terms:<span class="nt"></strong></span> Net 30 days<span class="nt"></p></span>
<span class="nt"><p><strong></span>Due Date:<span class="nt"></strong></span> February 14, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="certificate-with-print-optimization">Certificate with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Certificate of Completion<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">210mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.certificate</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">250mm</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">10pt</span> <span class="nb">double</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">36pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Georgia'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipient</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.details</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature-line</span> <span class="p">{</span>
<span class="nl">border-top</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"certificate"</span><span class="nt">></span>
<span class="nt"><h1></span>Certificate of Completion<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>This is to certify that<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"recipient"</span><span class="nt">></span>John Doe<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>
has successfully completed the course<span class="nt"><br/></span>
<span class="nt"><strong></span>Advanced PDF Generation<span class="nt"></strong><br/></span>
on January 15, 2025
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Instructor<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Director<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/link.html">link</a> - Link element for stylesheets</li>
<li><a href="/reference/htmltags/style.html">style</a> - Inline style element</li>
<li><a href="/reference/htmlattributes/rel.html">rel</a> - Relationship attribute for link element</li>
<li><a href="/reference/css/media.html">@media</a> - CSS media queries</li>
<li><a href="/reference/css/page.html">@page</a> - Page rules for print</li>
<li><a href="/reference/styles/">CSS Styles</a> - Complete CSS reference</li>
</ul>
<hr />
" max="themeJekyll::Drops::ThemeDrop"
low="themeJekyll::Drops::ThemeDrop" high="themeJekyll::Drops::ThemeDrop" optimum="content<h1 id="media--the-media-query-attribute">@media : The Media Query Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute specifies media queries that determine when styles or resources should be applied. Used primarily with <code class="language-plaintext highlighter-rouge"><link></code> and <code class="language-plaintext highlighter-rouge"><style></code> elements, it enables conditional CSS loading based on output characteristics. In PDF generation context, it allows creating print-optimized styles and responsive layouts tailored for different page sizes.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute defines media-specific conditions:</p>
<ul>
<li>Specifies when linked stylesheets or style blocks should apply</li>
<li>Uses CSS media query syntax for conditional styling</li>
<li>Common for <code class="language-plaintext highlighter-rouge">print</code> vs <code class="language-plaintext highlighter-rouge">screen</code> differentiation</li>
<li>Supports page size, orientation, and dimension queries</li>
<li>In PDF context, primarily used with <code class="language-plaintext highlighter-rouge">print</code> media type</li>
<li>Supports data binding for dynamic media selection</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Orientation-specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span> <span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Page size-specific --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Dynamic media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute is used with:</p>
<h3 id="link-element">Link Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><link></code> - External stylesheet loading with media conditions (primary use)</li>
</ul>
<h3 id="style-element">Style Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><style></code> - Inline CSS with media conditions</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute supports data binding for dynamic media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic media query --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Conditional media type --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Dynamic page size --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">""</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Repeating stylesheets with different media --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Configuration-based media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"layout.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: )"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"stylePath"</span><span class="p">:</span><span class="w"> </span><span class="s2">"custom.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"targetMedia"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isPrint"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"mediaQuery"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print and (orientation: portrait)"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageSize"</span><span class="p">:</span><span class="w"> </span><span class="s2">"A4"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageMargin"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2cm"</span><span class="p">,</span><span class="w">
</span><span class="nl">"stylesheets"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"base.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"all"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"orientation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"landscape"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="media-types">Media Types</h3>
<p>Standard media types for PDF generation:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print media (most common for PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen media (generally not applicable to PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="nt">/></span> <span class="c"><!-- Same as media="all" --></span>
</code></pre></div></div>
<p><strong>PDF Context:</strong></p>
<ul>
<li>PDFs are considered <code class="language-plaintext highlighter-rouge">print</code> media</li>
<li><code class="language-plaintext highlighter-rouge">screen</code> media queries typically don’t apply</li>
<li><code class="language-plaintext highlighter-rouge">all</code> applies to both print and screen</li>
<li>Use <code class="language-plaintext highlighter-rouge">print</code> for PDF-specific styles</li>
</ul>
<h3 id="print-media-queries">Print Media Queries</h3>
<p>Common print-specific media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Basic print stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Portrait orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Landscape orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Minimum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"wide.css"</span>
<span class="na">media=</span><span class="s">"print and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Maximum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"narrow.css"</span>
<span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Specific dimensions --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="page-size-media-features">Page Size Media Features</h3>
<p>Target specific page dimensions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- A4 size (210mm × 297mm) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size (8.5in × 11in) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Large format --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="orientation-media-queries">Orientation Media Queries</h3>
<p>Handle portrait vs landscape:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Portrait-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="multiple-media-queries">Multiple Media Queries</h3>
<p>Combine multiple conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- AND operator (both conditions must be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Comma (OR operator - any condition can be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print, screen"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"large.css"</span>
<span class="na">media=</span><span class="s">"(min-width: 800pt), (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- NOT operator --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"not-small.css"</span>
<span class="na">media=</span><span class="s">"not (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Complex combination --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"complex.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt),
print and (min-height: 1000pt)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="resolution-media-queries">Resolution Media Queries</h3>
<p>Target different print resolutions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- High resolution printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="n">high-quality</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Standard resolution --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-resolution: 150dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Alternative resolution units --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 2dppx)"</span><span class="nt">></span>
<span class="c">/* Styles for high-density output */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome">Color vs Monochrome</h3>
<p>Differentiate between color and monochrome output:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Color printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Specific color depth --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-color: 8)"</span><span class="nt">></span>
<span class="c">/* 8-bit color or higher */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="default-behavior">Default Behavior</h3>
<p>When no media attribute is specified:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No media specified - applies to all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="nt">/></span>
<span class="c"><!-- Explicitly stating all media (same result) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="media-attribute-vs-media-rule">Media Attribute vs @media Rule</h3>
<p>Two ways to specify media conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Method 1: media attribute on link --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Method 2: @media rule in CSS --></span>
<span class="nt"><style></span>
<span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Method 3: Combined approach --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- styles.css can also contain @media rules --></span>
</code></pre></div></div>
<h3 id="invalid-media-queries">Invalid Media Queries</h3>
<p>Handle invalid queries gracefully:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Valid --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"valid.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Invalid media type (ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"invalid.css"</span> <span class="na">media=</span><span class="s">"invalid-type"</span> <span class="nt">/></span>
<span class="c"><!-- Malformed query (may be ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"malformed.css"</span> <span class="na">media=</span><span class="s">"prin"</span> <span class="nt">/></span>
<span class="c"><!-- Always test your media queries --></span>
</code></pre></div></div>
<h3 id="pdf-specific-considerations">PDF-Specific Considerations</h3>
<p>For PDF generation with Scryber:</p>
<ol>
<li><strong>Use <code class="language-plaintext highlighter-rouge">print</code> media type</strong> for PDF-specific styles</li>
<li><strong>Avoid <code class="language-plaintext highlighter-rouge">screen</code> media</strong> as PDFs are print context</li>
<li><strong>Page size queries</strong> are useful for multi-format PDFs</li>
<li><strong>Orientation queries</strong> help with layout variations</li>
<li><strong><code class="language-plaintext highlighter-rouge">@page</code> rules</strong> should be in <code class="language-plaintext highlighter-rouge">print</code> media</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Recommended for PDF --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-print-stylesheet">Basic Print Stylesheet</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document with Print Styles<span class="nt"></title></span>
<span class="c"><!-- Common styles for all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-specific styles --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific styles (not used in PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document Title<span class="nt"></h1></span>
<span class="nt"><p></span>This document has different styles for print and screen.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="inline-print-styles">Inline Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Print-Optimized Document<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">" ("</span> <span class="n">attr</span><span class="p">(</span><span class="n">href</span><span class="p">)</span> <span class="s1">")"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Professional Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"no-print"</span><span class="nt">></span>
<span class="nt"><p></span>This section only appears on screen, not in print.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>
This document is optimized for printing.
Visit our <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>website<span class="nt"></a></span> for more information.
<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="orientation-specific-styles">Orientation-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Orientation-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Portrait styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Flexible Layout<span class="nt"></h1></span>
<span class="nt"><p></span>This layout adapts to page orientation.<span class="nt"></p></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 1<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 2<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 3<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 1<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 2<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 3<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="page-size-specific-styles">Page Size-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Format Document<span class="nt"></title></span>
<span class="c"><!-- A4 size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">170mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">letter</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">6.5in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Legal size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 14in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">legal</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content-wrapper"</span><span class="nt">></span>
<span class="nt"><h1></span>Adaptive Document<span class="nt"></h1></span>
<span class="nt"><p></span>This document adapts its layout based on page size.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome-1">Color vs Monochrome</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Color-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Color printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.warning</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff3cd</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#ffc107</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#856404</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#d4edda</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#28a745</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#155724</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8d7da</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#dc3545</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#721c24</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.warning</span><span class="o">,</span> <span class="nc">.success</span><span class="o">,</span> <span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"⚠ WARNING: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✓ SUCCESS: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✗ ERROR: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Status Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"success"</span><span class="nt">></span>
All systems operating normally.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"warning"</span><span class="nt">></span>
Minor performance degradation detected.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"error"</span><span class="nt">></span>
Critical failure in backup system.
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="wide-vs-narrow-layouts">Wide vs Narrow Layouts</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Responsive Print Layout<span class="nt"></title></span>
<span class="c"><!-- Narrow pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Wide pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">200pt</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">220pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span><span class="nt">></span>
<span class="nt"><h3></span>Navigation<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span><span class="nt">></span>Section 1<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span><span class="nt">></span>Section 2<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Main Content<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"two-column"</span><span class="nt">></span>
<span class="nt"><p></span>This content will display in two columns on wide pages
and one column on narrow pages.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="multiple-conditional-stylesheets">Multiple Conditional Stylesheets</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Conditional Document<span class="nt"></title></span>
<span class="c"><!-- Base styles for all --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"base.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-only base --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print-base.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Print portrait --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Print landscape --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- A4 specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm)"</span> <span class="nt">/></span>
<span class="c"><!-- Letter specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"letter.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span> <span class="nt">/></span>
<span class="c"><!-- High resolution --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"high-res.css"</span>
<span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Comprehensive Media Queries<span class="nt"></h1></span>
<span class="nt"><p></span>This document uses multiple conditional stylesheets.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="data-bound-media-queries">Data-Bound Media Queries</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
pageSize: "A4",
orientation: "portrait",
stylesheets: [
{ url: "base.css", media: "all" },
{ url: "print.css", media: "print" },
{ url: "portrait.css", media: "print and (orientation: portrait)" }
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Dynamic Media Queries<span class="nt"></title></span>
<span class="c"><!-- Dynamic stylesheets --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Dynamic page setup --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document with Dynamic Media Configuration<span class="nt"></h1></span>
<span class="nt"><p></span>Page size: <span class="nt"></p></span>
<span class="nt"><p></span>Orientation: <span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="report-with-print-optimization">Report with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Annual Report 2025<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="err">@top-center</span> <span class="err">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Annual Report 2025"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@bottom-right</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Page "</span> <span class="n">counter</span><span class="p">(</span><span class="n">page</span><span class="p">)</span> <span class="s1">" of "</span> <span class="n">counter</span><span class="p">(</span><span class="n">pages</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f2f2f2</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart</span> <span class="p">{</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.page-break</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><h2></span>Executive Summary<span class="nt"></h2></span>
<span class="nt"><p></span>Financial performance exceeded expectations...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-break"</span><span class="nt">></div></span>
<span class="nt"><h2></span>Financial Results<span class="nt"></h2></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Quarter<span class="nt"></th></span>
<span class="nt"><th></span>Revenue<span class="nt"></th></span>
<span class="nt"><th></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q1<span class="nt"></td></span>
<span class="nt"><td></span>$1.2M<span class="nt"></td></span>
<span class="nt"><td></span>15%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q2<span class="nt"></td></span>
<span class="nt"><td></span>$1.4M<span class="nt"></td></span>
<span class="nt"><td></span>18%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="invoice-with-print-styles">Invoice with Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Invoice #12345<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-header</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-between</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-details</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.total-row</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.payment-terms</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-header"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>INVOICE<span class="nt"></h1></span>
<span class="nt"><p><strong></span>Invoice #:<span class="nt"></strong></span> 12345<span class="nt"></p></span>
<span class="nt"><p><strong></span>Date:<span class="nt"></strong></span> January 15, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Company Name<span class="nt"></strong></p></span>
<span class="nt"><p></span>123 Business St<span class="nt"></p></span>
<span class="nt"><p></span>City, State 12345<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-details"</span><span class="nt">></span>
<span class="nt"><h3></span>Bill To:<span class="nt"></h3></span>
<span class="nt"><p></span>Client Name<span class="nt"><br/></span>
456 Client Ave<span class="nt"><br/></span>
City, State 67890<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Description<span class="nt"></th></span>
<span class="nt"><th></span>Quantity<span class="nt"></th></span>
<span class="nt"><th></span>Unit Price<span class="nt"></th></span>
<span class="nt"><th></span>Total<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service A<span class="nt"></td></span>
<span class="nt"><td></span>10<span class="nt"></td></span>
<span class="nt"><td></span>$100.00<span class="nt"></td></span>
<span class="nt"><td></span>$1,000.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service B<span class="nt"></td></span>
<span class="nt"><td></span>5<span class="nt"></td></span>
<span class="nt"><td></span>$150.00<span class="nt"></td></span>
<span class="nt"><td></span>$750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">class=</span><span class="s">"total-row"</span><span class="nt">></span>
<span class="nt"><td</span> <span class="na">colspan=</span><span class="s">"3"</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>TOTAL:<span class="nt"></td></span>
<span class="nt"><td></span>$1,750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"payment-terms"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Payment Terms:<span class="nt"></strong></span> Net 30 days<span class="nt"></p></span>
<span class="nt"><p><strong></span>Due Date:<span class="nt"></strong></span> February 14, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="certificate-with-print-optimization">Certificate with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Certificate of Completion<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">210mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.certificate</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">250mm</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">10pt</span> <span class="nb">double</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">36pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Georgia'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipient</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.details</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature-line</span> <span class="p">{</span>
<span class="nl">border-top</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"certificate"</span><span class="nt">></span>
<span class="nt"><h1></span>Certificate of Completion<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>This is to certify that<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"recipient"</span><span class="nt">></span>John Doe<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>
has successfully completed the course<span class="nt"><br/></span>
<span class="nt"><strong></span>Advanced PDF Generation<span class="nt"></strong><br/></span>
on January 15, 2025
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Instructor<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Director<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/link.html">link</a> - Link element for stylesheets</li>
<li><a href="/reference/htmltags/style.html">style</a> - Inline style element</li>
<li><a href="/reference/htmlattributes/rel.html">rel</a> - Relationship attribute for link element</li>
<li><a href="/reference/css/media.html">@media</a> - CSS media queries</li>
<li><a href="/reference/css/page.html">@page</a> - Page rules for print</li>
<li><a href="/reference/styles/">CSS Styles</a> - Complete CSS reference</li>
</ul>
<hr />
"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;
border-radius: 11pt;">
</meter>
<div style="margin-top: 5pt; font-size: 9pt; color: #888;">
Range: content<h1 id="media--the-media-query-attribute">@media : The Media Query Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute specifies media queries that determine when styles or resources should be applied. Used primarily with <code class="language-plaintext highlighter-rouge"><link></code> and <code class="language-plaintext highlighter-rouge"><style></code> elements, it enables conditional CSS loading based on output characteristics. In PDF generation context, it allows creating print-optimized styles and responsive layouts tailored for different page sizes.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute defines media-specific conditions:</p>
<ul>
<li>Specifies when linked stylesheets or style blocks should apply</li>
<li>Uses CSS media query syntax for conditional styling</li>
<li>Common for <code class="language-plaintext highlighter-rouge">print</code> vs <code class="language-plaintext highlighter-rouge">screen</code> differentiation</li>
<li>Supports page size, orientation, and dimension queries</li>
<li>In PDF context, primarily used with <code class="language-plaintext highlighter-rouge">print</code> media type</li>
<li>Supports data binding for dynamic media selection</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Orientation-specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span> <span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Page size-specific --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Dynamic media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute is used with:</p>
<h3 id="link-element">Link Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><link></code> - External stylesheet loading with media conditions (primary use)</li>
</ul>
<h3 id="style-element">Style Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><style></code> - Inline CSS with media conditions</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">media</code> attribute supports data binding for dynamic media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic media query --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Conditional media type --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Dynamic page size --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">""</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Repeating stylesheets with different media --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Configuration-based media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"layout.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: )"</span> <span class="nt">/></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"stylePath"</span><span class="p">:</span><span class="w"> </span><span class="s2">"custom.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"targetMedia"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isPrint"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"mediaQuery"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print and (orientation: portrait)"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageSize"</span><span class="p">:</span><span class="w"> </span><span class="s2">"A4"</span><span class="p">,</span><span class="w">
</span><span class="nl">"pageMargin"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2cm"</span><span class="p">,</span><span class="w">
</span><span class="nl">"stylesheets"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"base.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"all"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print.css"</span><span class="p">,</span><span class="w">
</span><span class="nl">"media"</span><span class="p">:</span><span class="w"> </span><span class="s2">"print"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"orientation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"landscape"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="media-types">Media Types</h3>
<p>Standard media types for PDF generation:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Print media (most common for PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen media (generally not applicable to PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="c"><!-- All media types (default) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="nt">/></span> <span class="c"><!-- Same as media="all" --></span>
</code></pre></div></div>
<p><strong>PDF Context:</strong></p>
<ul>
<li>PDFs are considered <code class="language-plaintext highlighter-rouge">print</code> media</li>
<li><code class="language-plaintext highlighter-rouge">screen</code> media queries typically don’t apply</li>
<li><code class="language-plaintext highlighter-rouge">all</code> applies to both print and screen</li>
<li>Use <code class="language-plaintext highlighter-rouge">print</code> for PDF-specific styles</li>
</ul>
<h3 id="print-media-queries">Print Media Queries</h3>
<p>Common print-specific media queries:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Basic print stylesheet --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Portrait orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Landscape orientation --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- Minimum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"wide.css"</span>
<span class="na">media=</span><span class="s">"print and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Maximum width --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"narrow.css"</span>
<span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Specific dimensions --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="page-size-media-features">Page Size Media Features</h3>
<p>Target specific page dimensions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- A4 size (210mm × 297mm) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm) and (height: 297mm)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size (8.5in × 11in) --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Large format --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 11in)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="orientation-media-queries">Orientation Media Queries</h3>
<p>Handle portrait vs landscape:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Portrait-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape-specific styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="nc">.page-header</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="multiple-media-queries">Multiple Media Queries</h3>
<p>Combine multiple conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- AND operator (both conditions must be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Comma (OR operator - any condition can be true) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span>
<span class="na">media=</span><span class="s">"print, screen"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"large.css"</span>
<span class="na">media=</span><span class="s">"(min-width: 800pt), (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- NOT operator --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"not-small.css"</span>
<span class="na">media=</span><span class="s">"not (max-width: 600pt)"</span> <span class="nt">/></span>
<span class="c"><!-- Complex combination --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"complex.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape) and (min-width: 800pt),
print and (min-height: 1000pt)"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="resolution-media-queries">Resolution Media Queries</h3>
<p>Target different print resolutions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- High resolution printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="n">high-quality</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Standard resolution --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-resolution: 150dpi)"</span><span class="nt">></span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">image-rendering</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Alternative resolution units --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-resolution: 2dppx)"</span><span class="nt">></span>
<span class="c">/* Styles for high-density output */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome">Color vs Monochrome</h3>
<p>Differentiate between color and monochrome output:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Color printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Specific color depth --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-color: 8)"</span><span class="nt">></span>
<span class="c">/* 8-bit color or higher */</span>
<span class="nt"></style></span>
</code></pre></div></div>
<h3 id="default-behavior">Default Behavior</h3>
<p>When no media attribute is specified:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No media specified - applies to all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="nt">/></span>
<span class="c"><!-- Explicitly stating all media (same result) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="media-attribute-vs-media-rule">Media Attribute vs @media Rule</h3>
<p>Two ways to specify media conditions:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Method 1: media attribute on link --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Method 2: @media rule in CSS --></span>
<span class="nt"><style></span>
<span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Method 3: Combined approach --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- styles.css can also contain @media rules --></span>
</code></pre></div></div>
<h3 id="invalid-media-queries">Invalid Media Queries</h3>
<p>Handle invalid queries gracefully:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Valid --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"valid.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Invalid media type (ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"invalid.css"</span> <span class="na">media=</span><span class="s">"invalid-type"</span> <span class="nt">/></span>
<span class="c"><!-- Malformed query (may be ignored) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"malformed.css"</span> <span class="na">media=</span><span class="s">"prin"</span> <span class="nt">/></span>
<span class="c"><!-- Always test your media queries --></span>
</code></pre></div></div>
<h3 id="pdf-specific-considerations">PDF-Specific Considerations</h3>
<p>For PDF generation with Scryber:</p>
<ol>
<li><strong>Use <code class="language-plaintext highlighter-rouge">print</code> media type</strong> for PDF-specific styles</li>
<li><strong>Avoid <code class="language-plaintext highlighter-rouge">screen</code> media</strong> as PDFs are print context</li>
<li><strong>Page size queries</strong> are useful for multi-format PDFs</li>
<li><strong>Orientation queries</strong> help with layout variations</li>
<li><strong><code class="language-plaintext highlighter-rouge">@page</code> rules</strong> should be in <code class="language-plaintext highlighter-rouge">print</code> media</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Recommended for PDF --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-print-stylesheet">Basic Print Stylesheet</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document with Print Styles<span class="nt"></title></span>
<span class="c"><!-- Common styles for all media --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"common.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-specific styles --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Screen-specific styles (not used in PDF) --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"screen.css"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document Title<span class="nt"></h1></span>
<span class="nt"><p></span>This document has different styles for print and screen.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="inline-print-styles">Inline Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Print-Optimized Document<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.no-print</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">" ("</span> <span class="n">attr</span><span class="p">(</span><span class="n">href</span><span class="p">)</span> <span class="s1">")"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Professional Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"no-print"</span><span class="nt">></span>
<span class="nt"><p></span>This section only appears on screen, not in print.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>
This document is optimized for printing.
Visit our <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>website<span class="nt"></a></span> for more information.
<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="orientation-specific-styles">Orientation-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Orientation-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Portrait styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Landscape styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Flexible Layout<span class="nt"></h1></span>
<span class="nt"><p></span>This layout adapts to page orientation.<span class="nt"></p></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 1<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 2<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Column 3<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 1<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 2<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #000; padding: 5pt;"</span><span class="nt">></span>Data 3<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="page-size-specific-styles">Page Size-Specific Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Format Document<span class="nt"></title></span>
<span class="c"><!-- A4 size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 210mm)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">170mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Letter size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">letter</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-wrapper</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">6.5in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Legal size styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (width: 8.5in) and (height: 14in)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">legal</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1in</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content-wrapper"</span><span class="nt">></span>
<span class="nt"><h1></span>Adaptive Document<span class="nt"></h1></span>
<span class="nt"><p></span>This document adapts its layout based on page size.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="color-vs-monochrome-1">Color vs Monochrome</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Color-Aware Document<span class="nt"></title></span>
<span class="c"><!-- Color printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (color)"</span><span class="nt">></span>
<span class="nc">.warning</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff3cd</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#ffc107</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#856404</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#d4edda</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#28a745</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#155724</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8d7da</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#dc3545</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#721c24</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Monochrome printing styles --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (monochrome)"</span><span class="nt">></span>
<span class="nc">.warning</span><span class="o">,</span> <span class="nc">.success</span><span class="o">,</span> <span class="nc">.error</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.warning</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"⚠ WARNING: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.success</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✓ SUCCESS: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.error</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"✗ ERROR: "</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Status Report<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"success"</span><span class="nt">></span>
All systems operating normally.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"warning"</span><span class="nt">></span>
Minor performance degradation detected.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"error"</span><span class="nt">></span>
Critical failure in backup system.
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="wide-vs-narrow-layouts">Wide vs Narrow Layouts</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Responsive Print Layout<span class="nt"></title></span>
<span class="c"><!-- Narrow pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (max-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="c"><!-- Wide pages --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (min-width: 600pt)"</span><span class="nt">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.sidebar</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">200pt</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.main-content</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">220pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.two-column</span> <span class="p">{</span>
<span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span><span class="nt">></span>
<span class="nt"><h3></span>Navigation<span class="nt"></h3></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span><span class="nt">></span>Section 1<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span><span class="nt">></span>Section 2<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>
<span class="nt"><h1></span>Main Content<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"two-column"</span><span class="nt">></span>
<span class="nt"><p></span>This content will display in two columns on wide pages
and one column on narrow pages.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="multiple-conditional-stylesheets">Multiple Conditional Stylesheets</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Multi-Conditional Document<span class="nt"></title></span>
<span class="c"><!-- Base styles for all --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"base.css"</span> <span class="na">media=</span><span class="s">"all"</span> <span class="nt">/></span>
<span class="c"><!-- Print-only base --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"print-base.css"</span> <span class="na">media=</span><span class="s">"print"</span> <span class="nt">/></span>
<span class="c"><!-- Print portrait --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"portrait.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: portrait)"</span> <span class="nt">/></span>
<span class="c"><!-- Print landscape --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"landscape.css"</span>
<span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span> <span class="nt">/></span>
<span class="c"><!-- A4 specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"a4.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 210mm)"</span> <span class="nt">/></span>
<span class="c"><!-- Letter specific --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"letter.css"</span>
<span class="na">media=</span><span class="s">"print and (width: 8.5in)"</span> <span class="nt">/></span>
<span class="c"><!-- High resolution --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"high-res.css"</span>
<span class="na">media=</span><span class="s">"print and (min-resolution: 300dpi)"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Comprehensive Media Queries<span class="nt"></h1></span>
<span class="nt"><p></span>This document uses multiple conditional stylesheets.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="data-bound-media-queries">Data-Bound Media Queries</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
pageSize: "A4",
orientation: "portrait",
stylesheets: [
{ url: "base.css", media: "all" },
{ url: "print.css", media: "print" },
{ url: "portrait.css", media: "print and (orientation: portrait)" }
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Dynamic Media Queries<span class="nt"></title></span>
<span class="c"><!-- Dynamic stylesheets --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">""</span> <span class="na">media=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></template></span>
<span class="c"><!-- Dynamic page setup --></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Document with Dynamic Media Configuration<span class="nt"></h1></span>
<span class="nt"><p></span>Page size: <span class="nt"></p></span>
<span class="nt"><p></span>Orientation: <span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="report-with-print-optimization">Report with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Annual Report 2025<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">portrait</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">2.5cm</span><span class="p">;</span>
<span class="err">@top-center</span> <span class="err">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Annual Report 2025"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#666</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@bottom-right</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"Page "</span> <span class="n">counter</span><span class="p">(</span><span class="n">page</span><span class="p">)</span> <span class="s1">" of "</span> <span class="n">counter</span><span class="p">(</span><span class="n">pages</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="err">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f2f2f2</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart</span> <span class="p">{</span>
<span class="nl">page-break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.page-break</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><h2></span>Executive Summary<span class="nt"></h2></span>
<span class="nt"><p></span>Financial performance exceeded expectations...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-break"</span><span class="nt">></div></span>
<span class="nt"><h2></span>Financial Results<span class="nt"></h2></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Quarter<span class="nt"></th></span>
<span class="nt"><th></span>Revenue<span class="nt"></th></span>
<span class="nt"><th></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q1<span class="nt"></td></span>
<span class="nt"><td></span>$1.2M<span class="nt"></td></span>
<span class="nt"><td></span>15%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Q2<span class="nt"></td></span>
<span class="nt"><td></span>$1.4M<span class="nt"></td></span>
<span class="nt"><td></span>18%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="invoice-with-print-styles">Invoice with Print Styles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Invoice #12345<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1.5cm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-header</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-between</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.invoice-details</span> <span class="p">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.total-row</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.payment-terms</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-header"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>INVOICE<span class="nt"></h1></span>
<span class="nt"><p><strong></span>Invoice #:<span class="nt"></strong></span> 12345<span class="nt"></p></span>
<span class="nt"><p><strong></span>Date:<span class="nt"></strong></span> January 15, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Company Name<span class="nt"></strong></p></span>
<span class="nt"><p></span>123 Business St<span class="nt"></p></span>
<span class="nt"><p></span>City, State 12345<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invoice-details"</span><span class="nt">></span>
<span class="nt"><h3></span>Bill To:<span class="nt"></h3></span>
<span class="nt"><p></span>Client Name<span class="nt"><br/></span>
456 Client Ave<span class="nt"><br/></span>
City, State 67890<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><table></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Description<span class="nt"></th></span>
<span class="nt"><th></span>Quantity<span class="nt"></th></span>
<span class="nt"><th></span>Unit Price<span class="nt"></th></span>
<span class="nt"><th></span>Total<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service A<span class="nt"></td></span>
<span class="nt"><td></span>10<span class="nt"></td></span>
<span class="nt"><td></span>$100.00<span class="nt"></td></span>
<span class="nt"><td></span>$1,000.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>Service B<span class="nt"></td></span>
<span class="nt"><td></span>5<span class="nt"></td></span>
<span class="nt"><td></span>$150.00<span class="nt"></td></span>
<span class="nt"><td></span>$750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">class=</span><span class="s">"total-row"</span><span class="nt">></span>
<span class="nt"><td</span> <span class="na">colspan=</span><span class="s">"3"</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>TOTAL:<span class="nt"></td></span>
<span class="nt"><td></span>$1,750.00<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"payment-terms"</span><span class="nt">></span>
<span class="nt"><p><strong></span>Payment Terms:<span class="nt"></strong></span> Net 30 days<span class="nt"></p></span>
<span class="nt"><p><strong></span>Due Date:<span class="nt"></strong></span> February 14, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="certificate-with-print-optimization">Certificate with Print Optimization</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Certificate of Completion<span class="nt"></title></span>
<span class="nt"><style </span><span class="na">media=</span><span class="s">"print and (orientation: landscape)"</span><span class="nt">></span>
<span class="k">@page</span> <span class="p">{</span>
<span class="nl">size</span><span class="p">:</span> <span class="n">A4</span> <span class="nb">landscape</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">210mm</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.certificate</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">250mm</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">10pt</span> <span class="nb">double</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">36pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Georgia'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipient</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.details</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.signature-line</span> <span class="p">{</span>
<span class="nl">border-top</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">padding-top</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"certificate"</span><span class="nt">></span>
<span class="nt"><h1></span>Certificate of Completion<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>This is to certify that<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"recipient"</span><span class="nt">></span>John Doe<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>
has successfully completed the course<span class="nt"><br/></span>
<span class="nt"><strong></span>Advanced PDF Generation<span class="nt"></strong><br/></span>
on January 15, 2025
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Instructor<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"signature-line"</span><span class="nt">></span>Director<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/link.html">link</a> - Link element for stylesheets</li>
<li><a href="/reference/htmltags/style.html">style</a> - Inline style element</li>
<li><a href="/reference/htmlattributes/rel.html">rel</a> - Relationship attribute for link element</li>
<li><a href="/reference/css/media.html">@media</a> - CSS media queries</li>
<li><a href="/reference/css/page.html">@page</a> - Page rules for print</li>
<li><a href="/reference/styles/">CSS Styles</a> - Complete CSS reference</li>
</ul>
<hr />
- themeJekyll::Drops::ThemeDrop
</div>
</div>
</template>
</div>
Storage Capacity (Bytes)
<!-- Disk storage with large byte values -->
<div style="border: 2pt solid #4CAF50; border-radius: 8pt; padding: 20pt;">
<h3 style="margin: 0 0 15pt 0; color: #4CAF50;">Storage Overview</h3>
<div style="margin-bottom: 18pt;">
<div style="margin-bottom: 8pt;">
<strong>SSD Drive</strong>
<span style="float: right;">250 GB / 500 GB</span>
<div style="clear: both;"></div>
</div>
<meter value="268435456000" min="0" max="536870912000"
low="161061273600" high="429496729600" optimum="0"
style="width: 100%; height: 24pt;">
250 GB
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
50% used (268,435,456,000 bytes)
</p>
</div>
<div style="margin-bottom: 18pt;">
<div style="margin-bottom: 8pt;">
<strong>HDD Archive</strong>
<span style="float: right;">1.8 TB / 2 TB</span>
<div style="clear: both;"></div>
</div>
<meter value="1978051092480" min="0" max="2199023255552"
low="659607418675" high="1759218604441" optimum="0"
style="width: 100%; height: 24pt;">
1.8 TB
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #d32f2f;">
90% used (1,978,051,092,480 bytes) - Consider cleanup
</p>
</div>
<div style="margin-bottom: 0;">
<div style="margin-bottom: 8pt;">
<strong>Cloud Storage</strong>
<span style="float: right;">25 GB / 100 GB</span>
<div style="clear: both;"></div>
</div>
<meter value="26843545600" min="0" max="107374182400"
low="32212254720" high="85899345920" optimum="0"
style="width: 100%; height: 24pt;">
25 GB
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #4CAF50;">
25% used (26,843,545,600 bytes) - Plenty of space
</p>
</div>
</div>
Input Number Constraints
<!-- Numeric input fields with min/max constraints -->
<div style="border: 1pt solid #ddd; padding: 20pt; border-radius: 6pt;">
<h3 style="margin: 0 0 15pt 0;">Order Form</h3>
<div style="margin-bottom: 12pt;">
<label style="display: block; font-weight: bold; margin-bottom: 5pt;">
Quantity (Min: 1, Max: 100)
</label>
<input type="number" value="5" min="1" max="100"
style="width: 150pt; padding: 8pt; border: 1pt solid #ccc;
font-size: 11pt;" />
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
Minimum order: 1 unit, Maximum order: 100 units
</p>
</div>
<div style="margin-bottom: 12pt;">
<label style="display: block; font-weight: bold; margin-bottom: 5pt;">
Age (Min: 18, Max: 120)
</label>
<input type="number" value="35" min="18" max="120"
style="width: 150pt; padding: 8pt; border: 1pt solid #ccc;
font-size: 11pt;" />
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
Must be 18 or older
</p>
</div>
<div style="margin-bottom: 12pt;">
<label style="display: block; font-weight: bold; margin-bottom: 5pt;">
Discount Percentage (Min: 0, Max: 50)
</label>
<input type="number" value="15" min="0" max="50"
style="width: 150pt; padding: 8pt; border: 1pt solid #ccc;
font-size: 11pt;" />
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #666;">
Maximum discount allowed: 50%
</p>
</div>
<div style="margin-bottom: 0;">
<label style="display: block; font-weight: bold; margin-bottom: 5pt;">
Rating (Min: 1, Max: 5)
</label>
<input type="number" value="4" min="1" max="5"
style="width: 100pt; padding: 8pt; border: 1pt solid #ccc;
font-size: 11pt;" />
<span style="margin-left: 10pt; color: #FF9800; font-size: 14pt;">
★★★★☆
</span>
</div>
</div>
pH Scale (0-14)
<!-- Scientific measurement with specific range -->
<div style="padding: 20pt; background-color: #eceff1; border-radius: 8pt;">
<h3 style="margin: 0 0 15pt 0;">Water Quality pH Levels</h3>
<div style="margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: 600;">
Drinking Water (Tap)
</p>
<meter value="7.2" min="0" max="14" low="6.5" high="8.5" optimum="7"
style="width: 100%; height: 24pt; border: 1pt solid #607d8b;">
pH 7.2
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #4CAF50;">
pH 7.2 - Safe for drinking (neutral)
</p>
</div>
<div style="margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: 600;">
Swimming Pool
</p>
<meter value="7.4" min="0" max="14" low="7.2" high="7.8" optimum="7.5"
style="width: 100%; height: 24pt; border: 1pt solid #607d8b;">
pH 7.4
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #4CAF50;">
pH 7.4 - Ideal for swimming
</p>
</div>
<div style="margin-bottom: 15pt;">
<p style="margin: 0 0 8pt 0; font-weight: 600;">
Aquarium (Freshwater)
</p>
<meter value="6.8" min="0" max="14" low="6.5" high="7.5" optimum="7"
style="width: 100%; height: 24pt; border: 1pt solid #607d8b;">
pH 6.8
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #4CAF50;">
pH 6.8 - Good for most freshwater fish
</p>
</div>
<div style="margin-bottom: 0;">
<p style="margin: 0 0 8pt 0; font-weight: 600;">
Industrial Wastewater
</p>
<meter value="3.5" min="0" max="14" low="6" high="9" optimum="7"
style="width: 100%; height: 24pt; border: 1pt solid #607d8b;">
pH 3.5
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; color: #d32f2f;">
pH 3.5 - Acidic, requires treatment before discharge
</p>
</div>
</div>
Pressure Gauge (PSI)
<!-- Tire pressure monitoring -->
<div style="border: 2pt solid #FF5722; border-radius: 10pt; padding: 20pt;">
<h3 style="margin: 0 0 20pt 0; color: #FF5722;">Tire Pressure Monitor</h3>
<table style="width: 100%;">
<tr>
<td style="padding: 12pt; width: 140pt; font-weight: 600;">
Front Left
</td>
<td style="padding: 12pt;">
<meter value="32" min="0" max="50" low="28" high="35" optimum="32"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
32 PSI
</meter>
</td>
<td style="padding: 12pt; width: 80pt; text-align: right; color: green;">
32 PSI ✓
</td>
</tr>
<tr style="background-color: #fff3cd;">
<td style="padding: 12pt; font-weight: 600;">
Front Right
</td>
<td style="padding: 12pt;">
<meter value="27" min="0" max="50" low="28" high="35" optimum="32"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
27 PSI
</meter>
</td>
<td style="padding: 12pt; text-align: right; color: orange;">
27 PSI ⚠
</td>
</tr>
<tr>
<td style="padding: 12pt; font-weight: 600;">
Rear Left
</td>
<td style="padding: 12pt;">
<meter value="33" min="0" max="50" low="28" high="35" optimum="32"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
33 PSI
</meter>
</td>
<td style="padding: 12pt; text-align: right; color: green;">
33 PSI ✓
</td>
</tr>
<tr style="background-color: #f8d7da;">
<td style="padding: 12pt; font-weight: 600;">
Rear Right
</td>
<td style="padding: 12pt;">
<meter value="22" min="0" max="50" low="28" high="35" optimum="32"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
22 PSI
</meter>
</td>
<td style="padding: 12pt; text-align: right; color: #d32f2f;">
22 PSI ✗
</td>
</tr>
</table>
<p style="margin: 15pt 0 0 0; padding: 10pt; background-color: #fff3cd;
border-radius: 4pt; font-size: 10pt;">
<strong>Warning:</strong> Front Right and Rear Right tires are below
recommended pressure. Inflate to 32 PSI.
</p>
</div>
Server Response Time (milliseconds)
<!-- API performance metrics -->
<div style="padding: 20pt; background-color: #263238; color: white; border-radius: 8pt;">
<h3 style="margin: 0 0 20pt 0;">API Response Times</h3>
<div style="margin-bottom: 15pt;">
<div style="margin-bottom: 8pt;">
<strong>/api/users</strong>
<span style="float: right;">45 ms</span>
<div style="clear: both;"></div>
</div>
<meter value="45" min="0" max="1000" low="200" high="500" optimum="0"
style="width: 100%; height: 20pt; background-color: #37474f;">
45ms
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; opacity: 0.8;">
Excellent response time
</p>
</div>
<div style="margin-bottom: 15pt;">
<div style="margin-bottom: 8pt;">
<strong>/api/products</strong>
<span style="float: right;">285 ms</span>
<div style="clear: both;"></div>
</div>
<meter value="285" min="0" max="1000" low="200" high="500" optimum="0"
style="width: 100%; height: 20pt; background-color: #37474f;">
285ms
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; opacity: 0.8;">
Acceptable response time
</p>
</div>
<div style="margin-bottom: 15pt;">
<div style="margin-bottom: 8pt;">
<strong>/api/reports</strong>
<span style="float: right;">725 ms</span>
<div style="clear: both;"></div>
</div>
<meter value="725" min="0" max="1000" low="200" high="500" optimum="0"
style="width: 100%; height: 20pt; background-color: #37474f;">
725ms
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; opacity: 0.8; color: #FF9800;">
Slow - needs optimization
</p>
</div>
<div style="margin-bottom: 0;">
<div style="margin-bottom: 8pt;">
<strong>/api/analytics</strong>
<span style="float: right;">120 ms</span>
<div style="clear: both;"></div>
</div>
<meter value="120" min="0" max="1000" low="200" high="500" optimum="0"
style="width: 100%; height: 20pt; background-color: #37474f;">
120ms
</meter>
<p style="margin: 5pt 0 0 0; font-size: 9pt; opacity: 0.8;">
Good response time
</p>
</div>
</div>
Offset Range Example (Exam Scores 60-100)
<!-- Grade range that doesn't start at zero -->
<div style="border: 1pt solid #336699; border-radius: 8pt; padding: 20pt;">
<h3 style="margin: 0 0 15pt 0; color: #336699;">
Student Exam Scores (Passing: 60-100)
</h3>
<div style="margin-bottom: 15pt;">
<div style="margin-bottom: 8pt;">
<strong>Alice Johnson</strong>
<span style="float: right; color: green; font-weight: bold;">A (95%)</span>
<div style="clear: both;"></div>
</div>
<meter value="95" min="60" max="100" low="70" high="85" optimum="100"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
95/100
</meter>
</div>
<div style="margin-bottom: 15pt;">
<div style="margin-bottom: 8pt;">
<strong>Bob Smith</strong>
<span style="float: right; color: green; font-weight: bold;">B (82%)</span>
<div style="clear: both;"></div>
</div>
<meter value="82" min="60" max="100" low="70" high="85" optimum="100"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
82/100
</meter>
</div>
<div style="margin-bottom: 15pt;">
<div style="margin-bottom: 8pt;">
<strong>Carol Williams</strong>
<span style="float: right; color: orange; font-weight: bold;">C (72%)</span>
<div style="clear: both;"></div>
</div>
<meter value="72" min="60" max="100" low="70" high="85" optimum="100"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
72/100
</meter>
</div>
<div style="margin-bottom: 0;">
<div style="margin-bottom: 8pt;">
<strong>David Brown</strong>
<span style="float: right; color: #d32f2f; font-weight: bold;">D (65%)</span>
<div style="clear: both;"></div>
</div>
<meter value="65" min="60" max="100" low="70" high="85" optimum="100"
style="width: 100%; height: 22pt; border: 1pt solid #ccc;">
65/100
</meter>
</div>
<p style="margin: 15pt 0 0 0; padding: 10pt; background-color: #e3f2fd;
border-radius: 4pt; font-size: 10pt;">
Note: Minimum passing score is 60. Scores are shown relative to the
60-100 passing range.
</p>
</div>
Network Bandwidth (Mbps)
<!-- Internet speed test results -->
<div style="padding: 25pt; background-color: #f5f5f5; border-radius: 10pt;">
<h2 style="margin: 0 0 25pt 0; text-align: center; color: #333;">
Network Speed Test Results
</h2>
<div style="background-color: white; padding: 20pt; border-radius: 8pt;
margin-bottom: 15pt; box-shadow: 0 2pt 4pt rgba(0,0,0,0.1);">
<h4 style="margin: 0 0 15pt 0; color: #4CAF50;">Download Speed</h4>
<meter value="450" min="0" max="1000" low="100" high="500" optimum="1000"
style="width: 100%; height: 32pt; border: 2pt solid #4CAF50;
border-radius: 16pt;">
450 Mbps
</meter>
<div style="text-align: center; margin-top: 10pt;">
<span style="font-size: 28pt; font-weight: bold; color: #4CAF50;">
450 Mbps
</span>
</div>
</div>
<div style="background-color: white; padding: 20pt; border-radius: 8pt;
margin-bottom: 15pt; box-shadow: 0 2pt 4pt rgba(0,0,0,0.1);">
<h4 style="margin: 0 0 15pt 0; color: #2196F3;">Upload Speed</h4>
<meter value="125" min="0" max="500" low="50" high="200" optimum="500"
style="width: 100%; height: 32pt; border: 2pt solid #2196F3;
border-radius: 16pt;">
125 Mbps
</meter>
<div style="text-align: center; margin-top: 10pt;">
<span style="font-size: 28pt; font-weight: bold; color: #2196F3;">
125 Mbps
</span>
</div>
</div>
<div style="background-color: white; padding: 20pt; border-radius: 8pt;
box-shadow: 0 2pt 4pt rgba(0,0,0,0.1);">
<h4 style="margin: 0 0 15pt 0; color: #FF9800;">Ping</h4>
<meter value="18" min="0" max="100" low="30" high="50" optimum="0"
style="width: 100%; height: 32pt; border: 2pt solid #FF9800;
border-radius: 16pt;">
18 ms
</meter>
<div style="text-align: center; margin-top: 10pt;">
<span style="font-size: 28pt; font-weight: bold; color: #FF9800;">
18 ms
</span>
</div>
</div>
</div>
Conditional Range Based on Data
<!-- Model: {
useMetric: true,
temperature: 25,
fahrenheitMin: 32,
fahrenheitMax: 212,
celsiusMin: 0,
celsiusMax: 100
} -->
<div style="padding: 20pt; border: 1pt solid #ddd; border-radius: 8pt;">
<h3 style="margin: 0 0 15pt 0;">Temperature Reading</h3>
<div style="margin-bottom: 10pt;">
<strong>Unit System:</strong>
<span style="margin-left: 10pt;">
</span>
</div>
<meter value=""
min=""
max=""
low=""
high=""
optimum=""
style="width: 100%; height: 28pt; border: 1pt solid #336699;">
</meter>
<div style="margin-top: 10pt; font-size: 9pt; color: #666;">
<div>Min: </div>
<div>Max: </div>
<div>Current: </div>
</div>
</div>
See Also
- meter - Meter/gauge element
- progress - Progress bar element
- input - Input field element
- value - Value attribute
- high and low - Threshold attributes for meter
- optimum - Optimal value attribute for meter
- Data Binding - Dynamic data binding and expressions
- CSS Styles - Complete CSS styling reference