# Useful CSS Rules

Here, we're trying to list the most useful css rules for (print/pdf/ebook) publications.

### Page Setup

<p class="callout info">Originally, CSS was designed for websites, not paged media. Therefore, we have to tell CSS that we want pages.</p>

#### @page[<sup>DOC</sup>](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@page)

The **`@page`** at-rule is a CSS at-rule used to modify different aspects of printed pages. It targets and modifies the page's dimensions, orientation, and margins.

```css
@page {
    size: A4; /* This is the page size */
    margin: 2cm; /* margin between page border and content. */
}
```

##### size<sup>[DOC](https://developer.mozilla.org/de/docs/Web/CSS/Reference/At-rules/@page/size)</sup>

Total page size, Example values: `A4`, `10cm 10cm`, …

##### margin<sup>[DOC](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin)</sup>

Margin between border and your content.   
You can set different margins on each site: `margin: 1cm 2cm 3cm 4cm;` will set the following margins: top 1cm, right 2cm, bottom 3 cm, left 4cm.

##### margin-top / margin-left / margin-right / margin-bottom

Same as margin but explicitly for one side. Use either margin: OR margin-top etc.

#### @page:left / @page:right / @page:first / @page:blank

You may additionally define one or multiple of these rules. `@page:left` only applies to left pages, etc.

#### @top-left-corner/@top-left/@top-center/@top-right/@top-right-corner/@bottom-left-corner/@bottom-left/@bottom-center/@bottom-right/@bottom-right-corner/@left-top/@left-middle/@left-bottom/@right-top/@right-middle/@right-bottom  


With these rules you can add content inside the margins, e.g. page numbers or a headline. Have to be used inside a page or page:left (etc.) rule!

```css
@page {
    @bottom-center {
        content: "Test Footer";
    }

    @top-center {
        content: "Headline!";
    }
}

```

### Typesetting

#### text-align[<sup>DOC</sup>](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-align) (Text Alignment)

Sets the text alignment. Typical values:

[`left`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-align#left)

The inline contents are aligned to the left edge of the line box.

[`right`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-align#right)

The inline contents are aligned to the right edge of the line box.

[`center`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-align#center)

The inline contents are centered within the line box.

[`justify`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-align#justify)

The inline contents are justified. Spaces out the content to line up its left and right edges to the left and right edges of the line box, except for the last line.