Introduction

Default CSS styles are defined in defaultCSS configuration variable which is based on the recommended default values for HTML4 - http://www.w3.org/TR/CSS21/sample.html

The appearance of a default mPDF document based on HTML should approximate to its appearance in a browser.

The following are supported (in order of ascending priority - lower ones in list overwrite higher):

HTML attributes e.g. <div align="center"> (see supported HTML attributes)
CSS Stylesheets - included in header of HTML document or as <link /> or as @import()
- html tags e.g. p { font-size:12pt; color:#880000; }
- class e.g. .stylename { font-size:9pt; }
- id e.g. #style { font-size:9pt; }
In-line CSS style e.g. <p style="font-family:monospace;">

Note: Prior to mPDF 5.x HTML attributes overrode CSS styles.

CSS attributes, used in stylesheets or in-line, can define:

most tags/elements e.g. div, p, body, table, span
class-names e.g. p.mystylename { font-size:9pt; }
id e.g. div#style { font-size:9pt; }

Tag, class and id can share a similar name e.g. p {...} .p {...} and #p {...} are handled uniquely

There is some support for ‘cascaded’ CSS e.g. div.topic table.type1 td {...}

table, tr, th and td will only be recognised as the last items (as above)
only ‘block’ elements (not ‘in-line’) can be included i.e. div.style1 a {...} will not work, nor will a#class1 {...}

For a full list of CSS attributes supported see Supported CSS

Note the OUTLINE style (which is not supported in most browsers) does work in mPDF e.g.

<span style="outline-width:thin|medium|thick; outline-color:#rrggbb|invert">

Using a stylesheet

Warning: mPDF is not meant to receive HMTL/CSS from an outside user.

All user input passed to mPDF should be vetted and sanitized properly above the level of standard browser-level sanitization (such is htmlspecialchars).

The WriteHTML() method takes second parameter i.e. $mode. See WriteHTML() for details of this and other parameters.

$mode

Values

0: Use this (default) if the text you pass is a complete HTML page including head and body and style definitions.
1: Use this when you want to set a CSS stylesheet - see example below
2: Write HTML code without the <head> information. Does not need to be contained in <body>

Example using a stylesheet

<?php

$stylesheet = file_get_contents('style.css');

$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);
$mpdf->WriteHTML($html, \Mpdf\HTMLParserMode::HTML_BODY);

Media selectors

mPDF supports media-dependent CSS styles as:

@media print {
    p { 
        color: red; 
    }
}

<style media="print">
    p { 
        color: red; 
    }
</style>

<link rel="stylesheet" media="print" href="..." />

By default mPDF will match stylesheets set for “print” or “all” media. This can be changed by the configurable variable CSSselectMedia.