The CSS @page rule defines the dimension of the page which is gonna be printed. There are a few important things that should be under control when you want to print a web page those are listed below:
- The page size, orientation, margins, border, and padding.
- Page breaks.
- Headers and footers.
- Page counters.
- Orphans.
All the above things are controllable when you follow the @page rule.
Syntax:
@page [:left | :right | :first] {
/* print-specific rules */
}
Page Descriptor: There are three Descriptors in the @page rule those are:
- size: Specify the size of the page box’s containing block.
- marks: It helps to trim the page that you want to print.
CSS
@page {
marks : crop cross ;
}
|
- bleed: It extends the bleed area of the box
Example:
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >CSS @page rule</ title >
< style type = "text/css" >
/* default for all pages */
@page {
margin: 2in;
}
/* margin on left page */
@page :left {
margin: 1in;
}
/* margin on right page */
@page :right {
margin: 3in;
}
/* top margin on first page */
@page :first {
margin-top: 5in;
}
h1 {
color: green;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h2 >CSS Page At-rule</ h2 >
< p >
If you open output in a new window and print the page
the margin around the text content appears differently
than it appears on the screen.
</ p >
</ center >
</ body >
</ html >
|
Output: When you choose to print the output screen of the above code.
Supported Browsers: The browsers supported by CSS @page rule are listed below:
- Google Chrome 2.0
- Internet Explorer 8.0
- Safari 5.1
- Opera 6.0
Last Updated :
09 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...