How to insert a page break after each footer element in CSS?

CSSWeb DevelopmentFront End Technology

CSS (Cascading Style Sheets) is a stylesheet language which enables the developers to style and format the HTML or XML elements in a web page. It makes our web page more attractive and user-friendly. In this article, we will see one more extensive use of a CSS property named as page-break. Our website may contain various footers. It is a good practice to add a page-break after every footer so as to make the users easy to understand and read our website. Generally, it is used to define how a document should behave after being printed.

Let’s see about what actually is a page break.

Page break

In simple words, page break means a dotted line or a pattern which separates two consecutive web pages. While designing a web page, we use the page-break property of CSS to show the same before, after or inside the elements.

Usually there are three types of page breaks. They are as follows −

  • page-break-after − It is used to add page breaks after an HTML element. For example, adding page break after the footer element.

  • page-break-before − It is used to add page breaks before a specified HTML element. For example, adding page break before the header element.

  • page-break-inside − It is used to add or sometimes avoid page breaks inside an HTML element. For example, avoiding page breaks within an image element.

Note − This property is only applicable for block elements which creates a box within it. It cannot be applied on empty <div>, <p> etc., elements which don’t create a box.

Here, we need to add page breaks after every footer element. So, we will study pagebreak- after property in detail.

page-break-after

The page-break-after property of CSS enables the developers to insert a page break after the HTML elements.

Syntax

element{
   page-break-after: value;
}

Values

  • auto − By default value. Automatically adds page breaks.

  • always − always insert page break after the specified element.

  • left − inserts page breaks after the specified element such that the page on which that element is present will be on left side.

  • right − inserts page breaks after the specified element such that the page on which that element is present will be on right side.

  • avoid − removes or avoids page breaks after the specified element.

  • initial − sets the value to its default value

  • inherit − inherits the value from its parent element

We will make use of page-break-after property to solve our problem.

Example

<!DOCTYPE html> <html> <head> <title> Page breaks </title> <style> h1{ color: green; text-align: center; text-decoration: underline; font-weight: 600; } h2{ text-shadow: 5px 5px 8px #6E0DD0; letter-spacing: 1px; } body{ width: 50%; margin: auto; font-size: 25px; padding: 5px; } footer{ page-break-after: always; border-bottom: 2px dotted red; margin: 8px 2px 0; padding: 10px 5px 5px 10px; } </style> </head> <body> <h1> Tutorialspoint </h1> <h2> Following is a Placeholder text</h2> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <footer> This is an example to show how to insert page breaks after every footer element using CSS. </body> </html>

A placeholder text paragraph is displayed. There is a page break after the footer text. A dotted border is displayed after the footer element.

Example

<!DOCTYPE html> <html> <head> <title> Page Breaks </title> <style> h1{ color: green; text-align: center; text-decoration: underline; font-weight: 600; } body{ width: auto; margin: auto; font-size: 20px; padding: 5px; } p{ width: 70%; position: relative; top: 10px; left: 60px; } footer{ font-size:15px; height: 250px; display: flex; color: white; background-color: #B2BEB5; page-break-after: always; border-bottom: 2px dashed black; margin: 0; padding: 10px 5px 5px 10px; } a{ color: white; } a:hover{ color: blue; } div{ display: flex; flex-direction: column; padding: 5px 50px; margin: 10px; position: relative; left: 100px; } </style> </head> <body> <h1> Tutorialspoint </h1> <article> <p>Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects.</p> <p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. </p> <footer> <div> <h2> <b> Office Address </b> <br> </h2> Tutorials Point India Private Limited, 4th Floor Incor9 Building, <br> Kavuri Hills, Madhapur, Hyderabad, Telangana - 500081, INDIA </div> <div> <h2> <b> Contact Us </b> </h2> <br> <a href ="https://www.instagram.com/tutorialspoint_/?hl=en"> Instagram</a> <br> <a href= "https://www.facebook.com/tutorialspointindia/"> Facebook </a> <br> <a href= "https://twitter.com/tutorialspoint?lang=en"> Twitter </a> <br> <a href= "https://www.linkedin.com/company/tutorialspoint/mycompany/">LinkedIn </a> <br> <a href= "https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg">Youtube </a> </div> </footer> </article> </body> </html>

Page will break after the footer element. A black dashed border is displayed after the footer element.

Conclusion

Page-break-after property is replaced by break-after. It is an alias of the break-after property which means if some websites are using the page-break-after property, the browsers will run it in the same way as for the break-after property. This makes it compatible on all the browsers. There is only one difference between the two of them, that is, the always value in page-break-after property is replaced by page value in break-after property.

raja
Updated on 11-Oct-2022 14:45:18

Advertisements