Customizing Headers and Footers with CSS in Markdown PDFs

A professional document requires consistent framing. Adding margins, running headers, and footers helps readers identify their current location in the document, track page counts, and associate pages with the publication’s brand.

In this guide, we’ll demonstrate how to design custom headers and footers markdown pdf css layouts using the CSS Paged Media module, supported by modern web-to-PDF compilers.

The Role of Page Regions in PDF Layouts

Standard web layouts render as a continuous page scroll. PDF printing, however, segmentizes this viewport into discrete physical pages. The CSS Paged Media standard introduces the @page rule, allowing web designers to manipulate margins and place content directly into designated header and footer boxes.

Step 1: Understanding CSS Paged Media and @page

The @page rule represents the physical page. It is divided into several margins and the page area:

@page {
  size: A4;
  margin: 20mm; /* Space reserved for margins */
  
  /* Defining header boxes */
  @top-left {
    content: "Research Paper Title";
    font-size: 9pt;
    color: #718096;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
  }
}

By mapping strings to margin boxes like @top-left, @top-right, @bottom-left, or @bottom-right, you can configure headers and footers directly from your stylesheet.

Step 2: Defining Header and Footer Content

Let’s configure a layout that adds a title header at the top right and author info at the bottom left.

Basic Text Headers

To style custom headers and footers, write clean rules:

@page {
  @top-right {
    content: "Technical Manual v2.0";
    font-family: sans-serif;
    font-size: 8pt;
  }
  @bottom-left {
    content: "© 2026 Corporation Inc. All rights reserved.";
    font-family: sans-serif;
    font-size: 8pt;
    color: #a0aec0;
  }
}

Dynamically Displaying Document Titles

If you want the header to change depending on the current chapter title, use CSS string-set properties:

h2 {
  string-set: chapter content();
}

@page {
  @top-left {
    content: string(chapter);
    font-style: italic;
  }
}

Note: Headings will update the running header automatically as the compiler moves through the page splits.

Step 3: Implementing Page Numbers and Counters

Footers almost always require dynamic page numbering. CSS Paged Media offers page counters to output values automatically:

@page {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: sans-serif;
    font-size: 8pt;
  }
}

• counter(page) yields the current page number.
• counter(pages) yields the total page count.

Step 4: Suppressing Headers and Footers on the Cover Page

You generally do not want running headers and footers to overlay your cover sheet. You can target specific pages using pseudo-classes:

/* General page rules */
@page {
  @top-center { content: "Main Content Header"; }
}

/* Override rules for the first page */
@page :first {
  @top-center { content: ""; }
  @bottom-right { content: ""; }
  margin-top: 30mm; /* Allow more margin space on first page */
}

By overriding the content to be an empty string, the cover page remains clean and clear of distracting metadata.

Take Control of Your Document Geometry

Using CSS margins and page headers gives your documents an enterprise-grade finish. To write Markdown, inject custom stylesheets, and instantly view your styled page outlines and headers, try our Markdown to PDF Editor.