Skip to content. | Skip to navigation

Personal tools
Log in
You are here: Home How to convert a Google document into a presentation with CSS

How to convert a Google document into a presentation with CSS

published Oct 10, 2016 05:40   by admin ( last modified Oct 10, 2016 05:43 )

This trick uses pure CSS to make a Google document into a PDF slide presentation. Just export the doc to HTML and paste in the CSS code below.

What you will get

  • Title, heading 1 and heading 2 will be kept, and so will bulleted lists
  • Pretty much everything else gets hidden.
  • Each of title, heading 1 or heading 2 starts a new slide.
  • There will be a logo placed above each slide heading.

How to do it

Export your document to HTML

Open the HTML document and remove the style element inside the head element

Paste this style element in instead (it assumes your logo is in images/image00.png)

    <style type="text/css">
    p {
        display: none;
    body {
        font-family: sans-serif;
    p.title {
        display: block;
        font-weight: bold;
        font-size: 48px
    @media print {
        h2 {
            page-break-before: always;
            padding-top: 40mm
        h1 {
            font-size: 42px
        h2 {
            font-size: 36px
        h2 {
            background-image: url('./images/image00.png');
            background-repeat: no-repeat;
            background-position: left top


Open the html file in e.g. Google Chrome

Open print dialog

Make sure "Background graphics" is ticked if you are using Google Chrome

Print to PDF

Open PDF in PDF viewer

Choose Presentation mode