How to Use CSS with HTML in C# for Responsive PDFs

Curtis Chau

Updated: August 2, 2026

Download IronPDF

• NuGet Download
• DLL Download
• Windows Installer

• ---

• Start Free Trial

Copy for LLMs

• Copy for LLMs

  Copy page as Markdown for LLMs
  # How to Use CSS with HTML in C&#35; for Responsive PDFs IronPDF enables C# developers to convert HTML with CSS to PDF while preserving responsive design by supporting both 'screen' and 'print' media types. Print mode optimizes layouts for PDF output and enables features like repeated table headers across pages. The CSS 'screen' media type is primarily for display on computer screens and similar devices. When styles are defined for the 'screen' media type, they affect how web content appears on screens, emphasizing visual design and interactivity. This includes elements like hover effects, animations, and background images that enhance the user experience on digital displays. The CSS 'print' media type is designed for printing. It determines how the web page appears when printed, focusing on optimizing content for the printed page. This optimization may include adjusting font sizes, margins, and removing elements that are unnecessary when printed. Print stylesheets often remove navigation menus, sidebars, and decorative elements to focus on core content, making documents more readable and conserving ink. When working with IronPDF's [Chrome PDF Rendering Engine](https://ironpdf.com/how-to/ironpdf-2021-chrome-rendering-engine-eap/), developers have full control over which media type to use, ensuring that PDFs generated from HTML maintain the intended design and functionality. This flexibility is valuable when creating documents that need to serve both digital distribution and physical printing purposes. *as-heading:2(Quickstart: Generate PDFs with Responsive HTML and CSS)* Convert your HTML with responsive CSS to PDF using IronPDF. With just a few lines of code, ensure your PDFs render perfectly across devices, maintaining the integrity of both screen and print styles. This quick guide demonstrates how to use IronPDF to achieve professional PDF output from existing HTML content. ```cs :title=Convert responsive web HTML to PDF in one line! new IronPdf.ChromePdfRenderer { RenderingOptions = { CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } } .RenderUrlAsPdf("https://example.com") .SaveAs("responsive.pdf"); ``` <div class="hsg-featured-snippet"> <h3>Minimal Workflow (5 steps)</h3> <ol> <li><a class="js-modal-open" data-modal-id="trial-license-after-download" href="https://www.nuget.org/packages/IronPdf/">Download the IronPDF C# library for CSS and HTML integration</a></li> <li>Prepare the HTML file for conversion to PDF</li> <li>Specify CSS media type for optimal PDF formatting</li> <li>Set CSS media type 'Print' for repeated table headers in PDFs</li> <li>Configure viewport dimensions for responsive design</li> </ol> </div> <br class="clear" /> ## How Do Screen & Print CSS Types Work in CSS3? ### Why Does Choosing the Right CSS Media Type Matter? IronPDF generates PDFs from HTML in C# and can render a screen stylesheet to PDF by default. This is convenient because print stylesheets are often less well-documented, used, or developed compared to their screen counterparts. However, understanding the distinction between these media types is crucial for producing professional-quality PDFs. When working with [CSS (Screen & Print)](https://ironpdf.com/how-to/html-to-pdf-responsive-css/) in IronPDF, the choice between screen and print media types significantly impacts your final PDF output. Screen media types preserve interactive elements and rich visual designs, while print media types optimize content for readability and paper-based consumption. CSS3 allows certain CSS styles to be rendered exclusively in printed documents, while others are intended for web browsers. IronPDF can work with either, giving you complete control over how your [HTML content is rendered to PDF](https://ironpdf.com/how-to/html-string-to-pdf/). This flexibility ensures that whether you're creating digital reports, printable invoices, or hybrid documents, your PDFs meet the specific requirements of their intended use case. ### When Should I Use Print vs Screen CSS Media Type? Create and apply a print stylesheet to your HTML: [Learn how to create and apply a perfect print stylesheet.](https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/). Each CSS media type targets different use cases. Try each one to see which suits your requirement. Consider these guidelines: **Use Print CSS Media Type when:** - Creating documents intended for physical printing - Generating invoices, reports, or formal documents - You need repeated table headers across pages - Conserving ink is a priority - Working with [Custom Paper Size](https://ironpdf.com/how-to/custom-paper-size/) requirements **Use Screen CSS Media Type when:** - Creating interactive PDFs with rich visual elements - Preserving web design aesthetics in the PDF - Including background images and colors - The PDF will primarily be viewed on screens - Working with responsive HTML to PDF conversions ### What Are the Visual Differences Between Screen and Print Modes?   The examples above demonstrate how the same HTML content renders differently based on the CSS media type selection. Notice how the print version removes decorative images and icons to create a cleaner, more printable document, while the screen version maintains all visual elements for digital viewing. <hr /> ## How Do I Repeat Table Headers Across PDF Pages? ### Why Do Table Headers Only Appear Once in Screen Mode? When dealing with HTML tables that span multiple pages, set the **`CssMediaType`** property to **`PdfCssMediaType.Print`**. This ensures that the table header repeats at the top of each extended page. In contrast, **`PdfCssMediaType.Screen`** instructs Chrome to print the headers only once. This behavior is particularly important when creating [PDF Reports](https://ironpdf.com/how-to/csharp-pdf-reports/) with lengthy data tables. The print media type activates specific CSS rules that browsers use for pagination, including the **`thead {display: table-header-group;}`** property that enables header repetition. This feature is essential for maintaining context when readers flip through multi-page documents. ### What HTML Structure Is Required for Repeating Headers? To ensure Chrome detects the table header, enclose it in a **`<thead>`** tag. Let's render the '<a href="/static-assets/pdf/how-to/html-to-pdf-responsive-css/`tableHeader.html`" download='`tableHeader.html`'>`tableHeader.html` example of repeating table headers</a>' HTML file to PDF to see the effect. Here's the recommended HTML structure: ```html <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <!-- Your table data rows here --> </tbody> </table> ``` ### How Do I Implement Table Header Repetition in C&#35;? ```cs :path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs ``` For more advanced table formatting options, explore [Custom Margins](https://ironpdf.com/how-to/custom-margins/) to control spacing around your tables, or implement [Page Breaks](https://ironpdf.com/how-to/html-to-pdf-page-breaks/) to ensure tables start on new pages when needed. ### What Does the Final PDF Output Look Like? <iframe loading="lazy" src="/static-assets/pdf/how-to/html-to-pdf-responsive-css/tableHeader.pdf" width="100%" height="400px"> </iframe> ## Advanced CSS Media Type Configuration When working with complex layouts, combine CSS media types with other IronPDF features. For instance, when using [Viewport & Zoom](https://ironpdf.com/how-to/viewport-zoom/) settings, the CSS media type you choose affects how responsive designs scale in the final PDF. Here's an example demonstrating advanced configuration: ```cs :path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-4.cs ``` For projects requiring pixel-perfect accuracy, consider using the [Debug HTML with Chrome](https://ironpdf.com/how-to/pixel-perfect-html-to-pdf/) feature to preview exactly how your CSS media types will render before generating the final PDF. ## Best Practices for CSS Media Types in IronPDF 1. **Test Both Media Types:** Always test your HTML with both screen and print media types to determine which produces the best results for your specific use case. 2. **Use Print for Documents:** When creating formal documents, invoices, or reports, the print media type typically provides cleaner, more professional results. 3. **Leverage Media Queries:** Utilize CSS media queries to fine-tune your layouts for different output scenarios. 4. **Consider Performance:** Print stylesheets often render faster because they exclude unnecessary visual elements. 5. **Validate Your CSS:** Use the [HTML Rendering Settings](https://ironpdf.com/examples/pdf-generation-settings/) to ensure your CSS is properly applied during PDF generation. By mastering CSS media types in IronPDF, you can create PDFs that perfectly match your requirements, whether they're designed for digital distribution or physical printing.

• ---

• Open in ChatGPT

  Ask ChatGPT about this page
• Open in Gemini

  Ask Gemini about this page
• Open in Grok

  Ask Grok about this page
• Open in Perplexity

  Ask Perplexity about this page

Share

• Share on Facebook
• Share on X (Twitter)
• Share on LinkedIn

• ---

• Email article

IronPDF enables C# developers to convert HTML with CSS to PDF while preserving responsive design by supporting both 'screen' and 'print' media types. Print mode optimizes layouts for PDF output and enables features like repeated table headers across pages.

The CSS 'screen' media type is primarily for display on computer screens and similar devices. When styles are defined for the 'screen' media type, they affect how web content appears on screens, emphasizing visual design and interactivity. This includes elements like hover effects, animations, and background images that enhance the user experience on digital displays.

The CSS 'print' media type is designed for printing. It determines how the web page appears when printed, focusing on optimizing content for the printed page. This optimization may include adjusting font sizes, margins, and removing elements that are unnecessary when printed. Print stylesheets often remove navigation menus, sidebars, and decorative elements to focus on core content, making documents more readable and conserving ink.

When working with IronPDF's Chrome PDF Rendering Engine, developers have full control over which media type to use, ensuring that PDFs generated from HTML maintain the intended design and functionality. This flexibility is valuable when creating documents that need to serve both digital distribution and physical printing purposes.

Convert your HTML with responsive CSS to PDF using IronPDF. With just a few lines of code, ensure your PDFs render perfectly across devices, maintaining the integrity of both screen and print styles. This quick guide demonstrates how to use IronPDF to achieve professional PDF output from existing HTML content.

How Do Screen & Print CSS Types Work in CSS3?

Why Does Choosing the Right CSS Media Type Matter?

IronPDF generates PDFs from HTML in C# and can render a screen stylesheet to PDF by default. This is convenient because print stylesheets are often less well-documented, used, or developed compared to their screen counterparts. However, understanding the distinction between these media types is crucial for producing professional-quality PDFs.

When working with CSS (Screen & Print) in IronPDF, the choice between screen and print media types significantly impacts your final PDF output. Screen media types preserve interactive elements and rich visual designs, while print media types optimize content for readability and paper-based consumption.

CSS3 allows certain CSS styles to be rendered exclusively in printed documents, while others are intended for web browsers. IronPDF can work with either, giving you complete control over how your HTML content is rendered to PDF. This flexibility ensures that whether you're creating digital reports, printable invoices, or hybrid documents, your PDFs meet the specific requirements of their intended use case.

When Should I Use Print vs Screen CSS Media Type?

Create and apply a print stylesheet to your HTML: Learn how to create and apply a perfect print stylesheet..

Each CSS media type targets different use cases. Try each one to see which suits your requirement. Consider these guidelines:

Use Print CSS Media Type when:

• Creating documents intended for physical printing
• Generating invoices, reports, or formal documents
• You need repeated table headers across pages
• Conserving ink is a priority
• Working with Custom Paper Size requirements

Use Screen CSS Media Type when:

• Creating interactive PDFs with rich visual elements
• Preserving web design aesthetics in the PDF
• Including background images and colors
• The PDF will primarily be viewed on screens
• Working with responsive HTML to PDF conversions

What Are the Visual Differences Between Screen and Print Modes?

The examples above demonstrate how the same HTML content renders differently based on the CSS media type selection. Notice how the print version removes decorative images and icons to create a cleaner, more printable document, while the screen version maintains all visual elements for digital viewing.

How Do I Repeat Table Headers Across PDF Pages?

Why Do Table Headers Only Appear Once in Screen Mode?

When dealing with HTML tables that span multiple pages, set the CssMediaType property to PdfCssMediaType.Print. This ensures that the table header repeats at the top of each extended page. In contrast, PdfCssMediaType.Screen instructs Chrome to print the headers only once. This behavior is particularly important when creating PDF Reports with lengthy data tables.

The print media type activates specific CSS rules that browsers use for pagination, including the thead {display: table-header-group;} property that enables header repetition. This feature is essential for maintaining context when readers flip through multi-page documents.

What HTML Structure Is Required for Repeating Headers?

To ensure Chrome detects the table header, enclose it in a <thead> tag. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

Here's the recommended HTML structure:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

How Do I Implement Table Header Repetition in C#?

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

For more advanced table formatting options, explore Custom Margins to control spacing around your tables, or implement Page Breaks to ensure tables start on new pages when needed.

What Does the Final PDF Output Look Like?

My favorite library of this kind is IronPDF. It allows for fast and efficient manipulation of PDF files. It also has many valuable features, like exporting to PDF/A format and digitally signing PDF documents.

Milan Jovanovic

Microsoft MVP

View case study

IronOCR means we can save $40,000 annually from manual processing, while enhancing productivity and freeing up resources for high-impact tasks. I would highly recommend it.

Brent Matzelle

Chief Technology Officer, OPYN

View case study

The IronSuite play a crucial role in our operations. These are tools that increase efficiencies across the business including creating floor plans and improving inventory management.

David Jones

Lead Software Engineer, Agorus Build

View case study

Advanced CSS Media Type Configuration

When working with complex layouts, combine CSS media types with other IronPDF features. For instance, when using Viewport & Zoom settings, the CSS media type you choose affects how responsive designs scale in the final PDF.

Here's an example demonstrating advanced configuration:

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true; // Override print defaults
renderer.RenderingOptions.MarginTop = 25;
renderer.RenderingOptions.MarginBottom = 25;

// Add custom CSS for print media
string customCss = @"
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
";

// Render with custom CSS injection
string htmlWithCss = $"<style>{customCss}</style>{yourHtmlContent}";
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlWithCss);

pdf.SaveAs("advanced-print-layout.pdf");

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true; // Override print defaults
renderer.RenderingOptions.MarginTop = 25;
renderer.RenderingOptions.MarginBottom = 25;

// Add custom CSS for print media
string customCss = @"
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
";

// Render with custom CSS injection
string htmlWithCss = $"<style>{customCss}</style>{yourHtmlContent}";
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlWithCss);

pdf.SaveAs("advanced-print-layout.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer()

' Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True ' Override print defaults
renderer.RenderingOptions.MarginTop = 25
renderer.RenderingOptions.MarginBottom = 25

' Add custom CSS for print media
Dim customCss As String = "
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
"

' Render with custom CSS injection
Dim htmlWithCss As String = $"<style>{customCss}</style>{yourHtmlContent}"
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlWithCss)

pdf.SaveAs("advanced-print-layout.pdf")

Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer()

' Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True ' Override print defaults
renderer.RenderingOptions.MarginTop = 25
renderer.RenderingOptions.MarginBottom = 25

' Add custom CSS for print media
Dim customCss As String = "
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
"

' Render with custom CSS injection
Dim htmlWithCss As String = $"<style>{customCss}</style>{yourHtmlContent}"
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlWithCss)

pdf.SaveAs("advanced-print-layout.pdf")

For projects requiring pixel-perfect accuracy, consider using the Debug HTML with Chrome feature to preview exactly how your CSS media types will render before generating the final PDF.

Best Practices for CSS Media Types in IronPDF

1. Test Both Media Types: Always test your HTML with both screen and print media types to determine which produces the best results for your specific use case.
2. Use Print for Documents: When creating formal documents, invoices, or reports, the print media type typically provides cleaner, more professional results.
3. Leverage Media Queries: Utilize CSS media queries to fine-tune your layouts for different output scenarios.
4. Consider Performance: Print stylesheets often render faster because they exclude unnecessary visual elements.
5. Validate Your CSS: Use the HTML Rendering Settings to ensure your CSS is properly applied during PDF generation.

By mastering CSS media types in IronPDF, you can create PDFs that perfectly match your requirements, whether they're designed for digital distribution or physical printing.