w3resource

CSS Properties: How to insert a page break after each footer element

Go to Exercise page

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to insert a page break after each footer element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.footer { /* Styles elements with class "footer" */
    page-break-after: always; /* Inserts a page break after each element with the class "footer" */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with the text "w3resource Tutorial" -->
<div class="footer">CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS.</div><!-- Displays a div with the specified class and text content, and applies a page break after it -->
<p>This is after footer</p><!-- Displays a paragraph with the specified text -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

  • This HTML document demonstrates how to insert a page break after each element with the class "footer" using CSS.
  • CSS comments are added to explain each section of the code.
  • The .footer CSS rule applies to elements with the class "footer" and sets the page-break-after property to "always", causing a page break to be inserted after each element with this class.
  • The document includes a paragraph before and after the footer element to demonstrate the effect of the page break.

Live Demo :

See the Pen page-break-after-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html-css-exercise/css-properties/page-break-after-answer.php