How to use CSS with HTML

The CSS 'screen' media type is primarily intended for display on computer screens and similar devices. When styles are defined for the 'screen' media type, they affect how web content is presented on screens, emphasizing visual design and interactivity.

In contrast, the CSS 'print' media type is designed for printing. It determines how the web page will appear when printed, with a focus on optimizing content for the printed page. This optimization may include adjusting font sizes, margins, and removing or hiding elements that are not relevant or necessary when printed.


C# NuGet Library for PDF

Install with NuGet

Install-Package IronPdf
or
C# PDF DLL

Download DLL

Download DLL

Manually install into your project

Screen & Print CSS Types (CSS3)

IronPDF generates PDFs from HTML in C# and can effortlessly render a screen stylesheet to a PDF by default. This is convenient because print stylesheets are often less well-documented, used, or developed compared to their screen counterparts.

CSS3 allows certain CSS styles to be rendered exclusively in printed documents, while others are intended for web browsers. IronPDF can be programmed to work with either.

Create and apply a print stylesheet to our HTML: https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.

Print CSS is often more suitable for rendering HTML to PDF than Screen CSS, as evidenced by the comparison below:

print
screen

Repeat Table Headers

When dealing with HTML tables that span multiple pages, set the CssMediaType property to PdfCssMediaType.Print. This ensures that the table header is repeated at the top of each extended page. In contrast, PdfCssMediaType.Screen instructs Chrome to print the headers only once.

To make sure Chrome detects the table header, it should be enclosed in a <thead> tag. Let's render the 'tableHeader.html' HTML file to PDF to see the effect.

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs
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")
VB   C#