Set Web Page A4 Size with Paper.css – CSS Framework

By | April 17, 2019
0 Comment

Paper.css can set web page for A4, A3 and A5 size, in this tutorial, we write an example for setting web page A4 size, you can do it step by step like us.

Preview

How to do?

Step 1. Load page.css in head tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

Step 2. Set page style

<!-- Set page size here: A5, A4 or A3 -->
<!-- Set also "landscape" if you need -->
<style>@page { size: A5 }</style>

Step 3. Set body to A4 size

<body class="A4">

Step 4. Set main content in body

<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-10mm">

    <!-- Write HTML just like a web page -->
    <article>
      <p>This is an A4 document.</p>
      <p>https://www.tutorialexample.com</p>
    </article>

  </section>

Leave a Reply