January 1st, 2024 × #print-css#css#web-dev

The Surprisingly Exciting World of Print + PDF CSS

Covers using print CSS for various use cases like shipping labels and recipes. Explains how to load print CSS, use advanced features like CSS counters and @page rules, control page margins and numbering, debug print styles, and generate PDFs.


In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more.

Show Notes

body {
counter-reset: chapter; /* create a chapter counter scope */

h1:before {
content: "Section " counter(chapter) " ";
counter-increment: chapter; /* add 1 to chapter */

h1 {
        counter-reset: subchapter; /* set section to 0 */
    h2:before {
        content: counter(chapter) "." counter(subchapter) " ";
        counter-increment: subchapter;
    h2 {
        counter-reset: section;
        font-size: 23px;
@page title {
  @top {
    /* no header for title pages */
    content: “”;

@page chapter {
  @top {
    content: “This is a chapter page”;

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads