Page breaks are used for printing purpose, as it can be set for the content to be printed in separated pages and in this tutorial we will learn to insert page break in CSS.
Step 1- Page – Break Code Structure
First of all, write the content which is to be displayed on the first page.
After that, open up the heading tag and use the break class.
With that done, write the title of the heading which would be displayed on the second page.
Then close the heading tag and type in the content for the next page after that.
Having done that, open up the heading tag and in a similar way as before, add a page break over there.
The code would be:
contents on first page
<h1 class=”break”> Heading Of Second Page</h1>
Contents On second Page
<h1 class=”break”> Heading Of Third Page</h1>
Step 2- Break Class Definition
With that done, define what the break class would actually do.
For that, we will move up and before the body tag, insert a style tag. Inside the style tag, we will specify the class properties.
Over here, we will be inserting a page break before the element on the document, which will be defined with the break class.
The CSS style code would be:
<style>
.break
{page-break-before:always;
}
</style>
The concept behind CSS page break before the attribute is that, it will first take the control to the new page and then display the content.
After that, save the HTML document and open up the file in the browser.
Step 3-Print Preview
With the page opened up, open its print preview and over there, see that wherever we have used the CSS page break class in the document, the content appears in a new page accordingly.
And that’s how we can insert page break in CSS.
Home