In , I covered . Now let us try to recreate a and planet poster from .

The HTML code is tiny. All we need is a div element for the circle and some elements for the black vertical lines. I decided to use 25 list elements for the lines.

<ul class="flex-container"> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li class="flex-item"></li> <li…

In this article, you will learn how to recreate a Bauhaus Poster from in HTML and CSS, the rendering of the result PDF will be done on . If you prefer watching me how I recreated this poster, have a look at my covering the same.

Bauhaus 1923

If you look at the result above you, see that this poster will be relatively easy to recreate with CSS. All you need is a header, three circles in the center, placed on top of each other, and four smaller circles below.

The first thing to look at is the HTML…

We all know the Certification PDFs you get at many e-learning platforms. Maybe you even need to create one for your own online course or platform; then this article is for you.

As in all other articles, we will use to create the PDF so that there is no need to install any rendering tool on your machine. Also below example is optimized and tested with ; nevertheless, it also works fine with most other rendering tools on the website.

The goal is a certificate PDF that looks like this article’s main image, which you see below.

Let us…

There are many different things you can do with the help of . I already covered some use cases in this , like , , and . Today I want to show you how to create beautiful poker cards. We will design one standard card and a joker card together. All other cards you can make with the same HTML and CSS by just changing the values.

Ace of Spades

Let us start with the ace of spades. As HTML, we create two divs for the front and backside. This will be two pages in the result PDF. Both…

There is the concept of widows and orphans in typography, which describes the line of a paragraph that appears alone. A Orphan is the first line of a paragraph that appears at the bottom of a page. On the other hand, a widow is the last line of a paragraph appearing on the top of a page.

Usually, you do not want a single line of a paragraph to be alone on the bottom or top of a page.

There are the CSS properties ‘’ and ‘’ to take care of such’ lonely’ lines. …

In this article you will learn how to create your own CV PDF with HTML, CSS. To render the actual PDF we will use an open-source tool to create PDF documents from HTML.

Before we start with the CV, let us think about the structure we want. So in this example we will create a multi-page CV and on each of the pages we will have our main details in a header section.

After the header there will be a short section for a introduction text. Then following a section for the employment history, the education and further skills.

…

You will learn how to use counters and nested counters in Print CSS and cross-reference via the target-counter(s) function.

In the end, I shortly show you with which you can convert any news article to a nice PDF.

In this article, you will learn everything about page selectors and breaks. Both are very important when you plan to style a multi-page publication, like booklets.

You will learn how to start each chapter on a separate page and style the left and right pages differently.

Page Selectors and Breaks

Using the , you can give a general style to all pages. But if you want to be more specific, page selectors like , and need to be used.

To see how these selectors work, let us start with a basic multi-page document. You can copy below HTML and CSS code…