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
Install with NuGet
Install-Package IronPdf
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:
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")