Useful CSS Rules

Here, we're trying to list the most useful css rules for (print/pdf/ebook) publications.

Page Setup

Originally, CSS was designed for websites, not paged media. Therefore, we have to tell CSS that we want pages.

@page^DOC

The @page at-rule is a CSS at-rule used to modify different aspects of printed pages. It targets and modifies the page's dimensions, orientation, and margins.

@page {
    size: A4; /* This is the page size */
    margin: 2cm; /* margin between page border and content. */
}

size^DOC

Total page size, Example values: A4, 10cm 10cm, …

margin^DOC

Margin between border and your content.
You can set different margins on each site: margin: 1cm 2cm 3cm 4cm; will set the following margins: top 1cm, right 2cm, bottom 3 cm, left 4cm.

margin-top / margin-left / margin-right / margin-bottom

Same as margin but explicitly for one side. Use either margin: OR margin-top etc.

@page:left / @page:right / @page:first / @page:blank

You may additionally define one or multiple of these rules. @page:left only applies to left pages, etc.

@top-left-corner/@top-left/@top-center/@top-right/@top-right-corner/@bottom-left-corner/@bottom-left/@bottom-center/@bottom-right/@bottom-right-corner/@left-top/@left-middle/@left-bottom/@right-top/@right-middle/@right-bottom