Screen Resolution (DPI) css

  

1st - So, I would like to know, if in CSS we have the possibility of   set the resolution of the site, as it is done in images, at 300 pixels per   inch.

On the first part of the question I do not know to answer you accurately, but I think this has more to do with the API that will generate the PDF than with the screen itself. Mainly because we are talking about text and not necessarily image ...

On the images I initially thought of srcset , but for that it will not serve, because it determines the "quality" of the image depending on the width of the screen or the pixel density of the screen, not the print. This means that it determines the image in @media screen and not in @media print .

So to adjust the resolution of your image for printing you have two options. The first one that is easiest and I believe is more crossbrowser and that will give you less problems is to have 2 images. One in low resolution that only appears on the screen in @media screen , and another img high resolution that only appears in @media print

Using the image-resolution: 300dpi; property

See:
Official W3C Source: link

  

Printers tend to have substantially higher resolution than computer monitors; because of this, an image that looks good on the screen may appear pixelated when printed. The image-resolution property can be used to embed a high-resolution image in the document and maintain an appropriate size, ensuring attractive display on the screen and on paper:

img.high-res {
    image-resolution: 300dpi;
}

Soon we will have something like this: OBS: Note that we have two tags of IMG below, but only one of them appears, which is the image with class .screen , already in print only the image class .print will appear, the other some!

.print {
    image-resolution: 300dpi;
}
@media only screen {
  .print {
    display: none;
  }
}
@media only print {
  .screen {
    display: none;
  }
}

<div>
  <img class="screen" src="https://placecage.com/100/100"alt="essa imagem só aparece na tela">
  <img class="print" src="https://placecage.com/200/200"alt="essa imagem só aparece na impressão">
</div>

TIP: W3C has in its documentation the option to use values in DPI to treat images within a media query , for example

@media print and (min-resolution: 300dpi) { … }

Source: link

But keep in mind that the print settings are made by the user, whether the print will be colored or not, or whether it will be in economical mode or not. So it is difficult to know if this resolution rule will work if the user has changed the printer settings ...

Already on this:

  

2º - It is possible to create css pages in size A5. By clicking   the browser understands that it corresponds to an A5 (21 x 15   cm)

You can use at-rule @page and set page size:

@page {
  size: A5;
}

Or

@page {
  size: 15cm 21cm;
}

To control the margins you can do so

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

TIP: You can also control page orientation in portrait and landscape : link

@page {
    size: A5 landscape;
}

This pot answer you're interested in: Decrease tables to fit on a page

W3C official documentation: link

Smash Magazine CSS Print article that you may be interested in: link