How to print header and footer on every printed page of a document in CSS ?
Last Updated :
07 May, 2023
Printing a header and footer on every page of a document can make the document look more professional and easier to read. In this article, we will discuss how to use CSS to print a header and footer on every printed page of a document.
Syntax: To print a header and footer on every printed page, you can use the following CSS syntax.
@media print {
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
}
Approaches: There are a few approaches to print headers and footers on every page of a printed document. Two popular approaches are:
- Using the position property of CSS to create a fixed header and footer
- Using the @page rule of CSS to define a header and footer for printing
Example 1: Using the position Property of CSS. To create a fixed header and footer, you can use the position property of CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
<style>
@media print {
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
}
</style>
</head>
<body>
<header>This is the header</header>
<main>
<p>Body content goes here</p>
</main>
<footer>This is the footer</footer>
</body>
</html>
|
.png)
How to use to print the header and footer on every printed page of a document?
The CSS styles set the position of the header and footer elements to be fixed for all pages using the position property. The top, bottom, left, and right properties are used to position them at the top and bottom of the page, with a height of 50 pixels. This ensures that the header and footer remain fixed in place on the printed document and won’t overlap with the content. The <header> and <footer> tags are used to define the header and footer of the document, respectively, and they contain the text “This is the header” and “This is the footer”.The <main> tag is used to define the main content of the document, and it contains a paragraph with the text “Body content goes here”. When the document is printed, the CSS styles inside the media query block will be applied, fixing the header and footer to their specified positions on the printed document.
Example 2: Using the @page Rule of CSS. Another way to create a header and footer for printing is by using the @page rule of CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
<style>
/* Define the CSS styles here */
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
/* Add the print styles here */
@media print {
/* Define the header and footer */
@page {
margin-top: 1cm;
margin-bottom: 1cm;
}
header:after {
content: "Header Text";
display: block;
text-align: center;
}
footer:after {
content: "Footer Text";
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<header>Header Content</header>
<h1>HTML</h1>
<p>
HTML stands for HyperText Markup
Language. It is used to design
web pages using the markup language.
HTML is the combination of Hypertext
and Markup language. Hypertext
defines the link between the web
pages and markup language defines
the text document within the tag
that define the structure of web
pages.
</p>
<footer>Footer Content</footer>
</body>
</html>
|
Output:
In this example, we’re using the @page rule inside a @media print block, which means that these styles will only be applied when the page is printed. We’ve set the margin-top and margin-bottom properties to 1cm to make sure there’s enough space for the header and footer. Inside the @page rule, we’ve used the @top-center and @bottom-center selectors to position the header and footer in the center of the page. You can use other selectors like @top-left, @top-right, @bottom-left, and @bottom-right to position the header and footer in different places.
Finally, we’ve used the content property to add the text for the header and footer. We can use any valid CSS property inside the @page rule to style the header and footer as desired.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...