Training on Using CSS @page and size in Print Layout

Today, designing for print in the web world has become highly important, and CSS features for this purpose provide suitable solutions that are very usable. For instance, using the @page feature allows us to define specific properties for printed pages.

One of the attractive and essential uses of this feature is adjusting the page size using the size directive. This directive gives you the capability to precisely set the print page size, especially when needing to print in specific formats such as A4, Letter, etc.

Utilizing @page offers designers more control over the printed output. You can use @page and size to accurately adjust the print format to your requirements.

Additionally, you will be able to easily customize your printed pages, for example, defining the length and width of pages or configuring them in landscape or portrait mode.

Furthermore, here is a key example of how to use @page and size, and I'll explain that section to you.

@page {
  size: A4 portrait;
  margin: 1cm;
}

@page landscape {
  size: A4 landscape;
}

Code Explanation:

@page: This feature is used to define the properties of the printed page, and you can further customize it with specific adjustments such as size, margins, etc.

size: A4 portrait;: This line of code allows you to set the page size to A4 with a portrait orientation.

margin: 1cm;: This part of the code sets the margins of the printed page to 1 centimeter from all sides.

@page landscape: This part is for defining specific settings for when the page is printed in landscape mode.

size: A4 landscape;: This line sets the page size to A4 with a landscape orientation.