In this guide, we will share a CSS Cheat Sheet surely to be helpful for all your web-dev projects.

Plus too, we will show you the print CSS basics where you will learn how to write CSS for pages intended for printing.

As a developer, you may be tasked with designing a web page for an app that will be converted to a PDF file once completed, or perhaps you simply want to make an existing site's pages look even better when printed.

In either case, CSS is your friend, and you can print CSS easily too by following a few simple rules, as outlined below.

Everyone owns a device in the twentieth century which makes consuming all the info. we need digitally nearly impossible.  

Today, it seems as if the only real paper people use nowadays is bathroom tissue, so it may seem odd to focus on what you believe is a long-forgotten habit; printing web pages.

As off as this may seem to techie visionaries, a paperless world is a reality still many years away.

Tons of paper drift out of printers around the globe each day, reason being, not everyone has a mobile device or a computer within reach at all times.  And to some people, printed, written-down text is better.  For example, I often try new recipes, and to avoid looking at my phone while cooking, I print recipes out as consuming the content is easier for me this way.

Getting to know CSS - CSS for Beginners

A Cascading Style Sheet, or CSS, is a stylesheet language dictating how website elements appear.  

By embedding a CSS file into a HTML document, you will have great command over your site's appearance.

With CSS, you control website features for the:

· Font

· Layout

· Design

· Website color

Let's see how CSS works by review the syntax:

This declaration can then be broken into:

As depicted, the CSS syntax contains both a selector and declaration block; the selector being the HTML element in which you will control.

The declaration block contains the name and value of the property within the HTML element; each is divided by a colon (:) and declared using curly-styled brackets ({}).

Let's assume you need the font within your header (h1) to be thirty pixels, if so, your syntax should look like the following:

In this example, your selector is the h1 with the font-size set as the property name and the 20x representing the value.

Being that CSS has a range of declarations and selectors, it may not be easy to remember them all, so we put together a CSS and CSS3 Cheat Sheet to help you streamline the task.

Get Started - Print CSS Rules

Devs know the @media rule, as you should too.

If doing responsive-design work you are likely familiar with the @media rule.  In addition to varying screen sizes, the @media rule allows you to target printed media too.

Let's take a look:

With this rule, you can set standard CSS to normal and then add custom styles to be used only when printed:

You can zero-out standard screen styles to start from scratch by wrapping your screen styles within another @media rule:

Controlling Page Breaks - Print CSS Basics

To ensure content reads smoothly you will want to use page breaks; it should be split up and easily digestible by readers.  

If large heading text appears out of place at the bottom of a page, start a new page.  This goes for tables too; you do not want them to span multiple pages if prioritizing the clean-looking format.

Inserting page breaks is easy, add one of the following:

· page-break-before

· page-break-after

· page-break-inside

Property values can be toggled using always or avoid.

Readability is a big deal, so if your document contains tables that span many pages, you will want to add table headers to the start of each page so it is easy to follow, which is simple to do; use the tbody and thead elements within the table.

Let's say we have the following:

Once printed, your table would appear as such:

Notice how the table begins at the beginning of each page; it is neatly broken up and displaying in print-friendly format.

What if I want to add or remove content?

You may find yourself needing to add content that only shows when printed.  For example, you may want to link some URLs that can be printed, if so, you can use the :after element:

With CSS, you can choose which elements show when printed.  

Elements can be hidden or shown by combining display and @media declarations, as demonstrated below:

Pro Tip: Emulate CSS Media for development.

Accelerate development by toggling your browser to display print styles.  If using Chrome on Mac, go to Developer Tools, start the Run Command prompt (command-shift-P) and then search for Emulate CSS Print Media Type.

Similar options exist in other browsers though PDFs need to be printed manually each time you want to see where page breaks occur.

Pro Tip: Use widows and orphans.

Widows and orphans dictate how text within an element displays across pages and can improve the readability of printed documents.

Let's take a look at the following:

On the bottom left, the second paragraph starts before the page break since the orphans property is set to 2.  

If set to 3 instead, as shown on the right-hand side, it is pushed down and as such begins on the next page.

Opposite of orphans is the widows property; used to specify how many lines you want at the beginning of new pages.

Pro Tip: Learn the @page function.

Using the @page rule, you can set page margins for any page:

Sadly, browser support for this is limited; you can only use the :left, :right, :blank, :first, and :last pseudo-selectors.

Awesome, you are now familiar with the property values and steps for creating print-friendly layouts supported by modern internet browsers, such as Safari, Firefox, and Chrome.

Unfortunately, modern browsers offer limited support for print layout features.  For example, with CSS, there is no standard procedure for adding custom-sized headers and footers.  

One resource worth visiting is the paged.js project which provides a polyfill for most print layout features not yet supported by browsers.

You reached the end of the Print CSS segment, great job, you can now structure and stylize print-friendly pages with ease.  

If a web developer or agency running a web application and want to integrate PDF functionality, cloudlayer.io offers a performance-driven API for HTML to PDF conversions.

Want to convert web pages into beautiful, read-friendly PDF files without wasting hours in the process?  

Need an HTML to PDF service that scales with your needs and streamlines workflows?

Perhaps you are an agency, freelancer, or dev and need to generate PDFs for clients or to create work samples, or you may have a business unable to waste time converting HTML manually.

If so you are not alone as many search for how to convert HTML into PDF form, but for you, that search ends today.

If wondering how to convert a website to PDF you will be glad to know the solution is not only simple but affordable too.

Get Started - HTML to PDF

Convert website to PDF as quickly as you create an account.

To begin conversions, your first step is to create a profile, head over to the Create Account link atop the site or by clicking here.

Once created and email-verified, your account will be credited with free credits and enough to process 2,000 requests for free.

With your first 2,000 conversions being free you will be able to see how quickly the service performs at no cost, and when credits deplete, you can keep converting HTML to PDF at some of the lowest cost-per-conversion rates in the industry.

To purchase credits or a subscription, head to the Dashboard and select Subscription & Credits while logged in.  With credits or active service, you can have up to five API keys at once.

We hope this guide helped you to learn the print CSS basics, with the steps here followed, you can create pages your visitors will enjoy printing and love reading, and if or when you need an HTML to PDF service that scales with your business, no matter the number or volume of conversions you need monthly, we have solutions for you.

Welcome to cloudlayer.io, your all-in-one, file-conversion service.