How to use CSS with HTML

ByChaknith Bin

January 25, 2023

Updated June 22, 2025

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

Download the IronPDF C# library for CSS and HTML integration
Prepare the HTML file for conversion to PDF
Specify CSS media type for optimal PDF formatting
Set CSS media type 'Print' for repeated table headers in PDFs
Configure viewport dimensions for responsive design

Get started with IronPDF

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

First Step:

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 your HTML: Learn how to create and apply a perfect print stylesheet..

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.

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 example of repeating table headers' 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

// Import necessary namespaces from the IronPdf library
using IronPdf;
using IronPdf.Rendering;

// Create a new instance of ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set custom paper size in pixels or points: width = 600, height = 400
// This allows customization of the dimensions of the rendered PDF.
renderer.RenderingOptions.SetCustomPaperSizeInPixelsOrPoints(600, 400);

// Use the print media type for CSS styles, which is suitable for printing
// This option ensures that the styles meant for print media are applied.
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render the HTML file named "tableHeader.html" as a PDF document
// This method converts the specified HTML file into a PDF.
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

// Save the rendered PDF document to the specified file path "tableHeader.pdf"
// This saves the generated PDF file to the system at the given path.
pdf.SaveAs("tableHeader.pdf");

' Import necessary namespaces from the IronPdf library

Imports IronPdf

Imports IronPdf.Rendering



' Create a new instance of ChromePdfRenderer

Private renderer As New ChromePdfRenderer()



' Set custom paper size in pixels or points: width = 600, height = 400

' This allows customization of the dimensions of the rendered PDF.

renderer.RenderingOptions.SetCustomPaperSizeInPixelsOrPoints(600, 400)



' Use the print media type for CSS styles, which is suitable for printing

' This option ensures that the styles meant for print media are applied.

renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print



' Render the HTML file named "tableHeader.html" as a PDF document

' This method converts the specified HTML file into a PDF.

Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")



' Save the rendered PDF document to the specified file path "tableHeader.pdf"

' This saves the generated PDF file to the system at the given path.

pdf.SaveAs("tableHeader.pdf")

$vbLabelText $csharpLabel

Frequently Asked Questions

What is the primary purpose of the CSS 'screen' media type?

The CSS 'screen' media type is intended for display on computer screens and similar devices, affecting web content presentation with a focus on visual design and interactivity.

How does the CSS 'print' media type differ from 'screen'?

The CSS 'print' media type is designed for printing, optimizing content for the printed page by adjusting font sizes, margins, and potentially removing unnecessary elements.

How can I implement responsive CSS with HTML using a C# library?

To implement responsive CSS with HTML using IronPDF, you need to download the IronPDF C# library, prepare your HTML file, specify the CSS media type, and configure viewport dimensions for responsive design.

What are the benefits of using a print stylesheet?

A print stylesheet allows specific CSS styles to be applied exclusively in printed documents, ensuring that the content is optimized for print rather than screen display.

How can I ensure table headers repeat on each page in a PDF?

To ensure table headers repeat on each page in a PDF, set the CssMediaType property to PdfCssMediaType.Print and enclose the table header in a tag.

Why might one CSS media type be more suitable than another?

The suitability of a CSS media type depends on the use case; 'screen' targets digital displays while 'print' optimizes for physical printouts. It's recommended to try both to determine which fits your requirements.

Can a library render both screen and print stylesheets?

Yes, IronPDF can render both screen and print stylesheets, allowing for flexibility depending on whether the content is intended for browser display or printed format.

Chaknith Bin

Chat with engineering team now

Software Engineer

Chaknith works on IronXL and IronBarcode. He has deep expertise in C# and .NET, helping improve the software and support customers. His insights from user interactions contribute to better products, documentation, and overall experience.