mPDF Book Manual
Support mPDF by making a small donation?

(Note that PayPal will show the recipient as BPM Books. This is name under which I publish the Palliative Medicine Handbook for which I developed mPDF):

Rate it!
If you like mPDF, please rate it at
Next »

Edition/Revision: 1.0
Validated 20 Sep 2009

Stylesheets & CSS - Introduction

Default CSS styles are defined in config.php file (as var $default_CSS) which is based on the recommended default values for HTML4 - 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

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

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

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

Media selectors

mPDF supports media-dependent CSS styles as:

@media print {
 p { color: red; }

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

<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.

Edition/Revision: 1.0
Created 9 Feb 2009
Validated 20 Sep 2009 by Ian Back
Last modified 25 Jan 2015

Next »
Sun 25 Jan 2015 20:15:56 GMT
mPDF website
Last modified 25 Jan 2015