Css for print creating style sheets for print media

CSS for print: creating style sheets for print media

Cascading Style Sheets (CSS) are an essential tool for designing and styling web pages. However, sometimes it is necessary to adapt the design for print, as what you see on screen may not be suitable for printing.

Creating specific style sheets for print media is a perfect solution to this problem. These style sheets allow you to define layout and formatting rules that will be applied exclusively when the content is printed.

Why create style sheets for print media?

When a website is printed directly from the browser, there are often problems such as poorly readable background elements, headers and footers, and so on. By creating a style sheet for print media, we can control and optimise the appearance of the page when printed, ensuring a quality presentation.

Steps to create a style sheet for print media

1. Add a reference to the style sheet in the HTML file:

<link href="URL/archivo.css"  />

2. Create a separate CSS file for the style rules intended for printing. For example, "styles.css".

3. Use CSS rules to adapt the layout for print media. Examples of common rules include:
Hide non-printed elements:

@media print {
.no-print {
display: none;
}
}

Adjust font size and remove unnecessary styles:

@media print {
body {
font-size: 12pt;
color: black;
text-decoration: none;
}
a {
text-decoration: none;
}
}

Customise headers and footers:

@media print {
@page {
margin-top: 2cm;
margin-bottom: 2cm;
@top-left {
content: "Texto personalizado para encabezado izquierdo";
}
@top-right {
content: "Texto personalizado para encabezado derecho";
}
@bottom-left {
content: "Texto personalizado para pie de página izquierdo";
}
@bottom-right {
content: "Texto personalizado para pie de página derecho";
}
}
}

Additional recommendations

• Use a legible colour scheme in printing and avoid dark backgrounds that can consume a lot of ink.
• Make sure that critical elements, such as images and tables, fit correctly on the page.
• Performs test prints to ensure that the desired result is achieved.
• Remember to include an option for users to download a printable version of the page.

Creating style sheets for print media is an essential practice to ensure proper presentation of information when printed in the browser. By following these steps and considering the additional recommendations, you will be able to create effective, print-optimised style sheets.

I hope you found this guide useful. If you want to learn more about CSS for print, I recommend you to visit this link: https://www.w3schools.com/css/css3_print.asp.