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

Last update on February 24 2024 12:27:01 (UTC/GMT +8 hours)

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 solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page