1. IronPDF
  2. How-Tos
  3. CSS (Screen & Print)

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.

How to use Responsive CSS with HTML

  1. Download the C# library to use CSS with HTML
  2. Prepare the HTML file for conversion to PDF
  3. Specify the appropriate CSS media type for excellent PDF output
  4. Set the CSS media type to 'Print' to enable table header repetition
  5. Configure the viewport width and height independently


C# NuGet Library for PDF

Install with NuGet

Install-Package IronPdf
nuget.org/packages/IronPdf/
or
Java PDF JAR

Download DLL

Download DLL

Manually install into your project

C# NuGet Library for PDF

Install with NuGet

Install-Package IronPdf
nuget.org/packages/IronPdf/
or
Java PDF JAR

Download DLL

Download DLL

Manually install into your project

Start using IronPDF in your project today with a free trial.

First Step:
green arrow pointer

Check out IronPDF on Nuget for quick installation and deployment. With over 8 million downloads, it's transforming PDF with C#.

C# NuGet Library for PDF nuget.org/packages/IronPdf/
Install-Package IronPdf

Consider installing the IronPDF DLL directly. Download and manually install it for your project or GAC form: IronPdf.zip

Manually install into your project

Download DLL

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

It is very hard to say which CSS media type is better since each type targets different use cases. It is worth trying each one through trial and error to see which is suitable for your requirement.

Example of Print 1 Example of Screen 1

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#