How to make an HTML Page in A4 Paper Size ?

Last Updated : 11 Mar, 2024

To create an HTML page with the A4 paper size and add a shaded background to it. Ensuring that your HTML content fits the standard A4 paper dimensions can be crucial, especially when printing or exporting documents. We’ll cover the steps to set up the A4 size, add a shaded background, and center the content within the page.

Output Preview: Let us have a look at how the final output will look like.

Preview

Approach to make an HTML page in A4 paper size

To set the A4 paper size in HTML, we use CSS’s @page rule. This rule allows us to define the size of the page for printing purposes. We set the size property to A4 and ensure no margins are added to the page.
We can add a shaded background to the HTML page by styling a container div. In our example, we use the .content class to define the background color.
You can also use an image as the background by uncommenting the background-image property and specifying the path to your image.
To center the content within the A4 page, we utilize CSS flexbox properties.
By setting display: flex; justify-content: center; align-items: center; on the html, body elements, we ensure that the content is horizontally and vertically centered within the page.

Example: Implementation of creating an HTML page in A4 paper size

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>A4 Paper Size with Shade - Centered Content</title>
    <style>
        /* Set A4 size */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        @page {
            size: A4;
            margin: 0;
        }
 
        /* Set content to fill the entire A4 page */
        html,
        body {
            width: 210mm;
            height: 297mm;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        /* Style content with shaded background */
        .content {
            width: 80%;
            /* Adjust the width as needed */
            height: 80%;
            /* Adjust the height as needed*/
            padding: 20px;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            /* Light gray shade */
        }
    </style>
</head>
 
<body>
    <div class="content">
        <!-- Your content goes here -->
        <h1>Hello, A4 World!</h1>
        <p>This is an example of an HTML page with A4 
           paper size and shaded background.
          </p>
    </div>
</body>
 
</html>