# Custom Stylesheet Examples

Here you can find some example stylesheets that can be used for formatting the document.

{% hint style="warning" %}
**Important:** Do not set the body and HTML height to 100% in the stylesheet if you are using cover pages. Set it to 99% instead.
{% endhint %}

### Formatting headers <a href="#customstylesheetexamples-formattingheader" id="customstylesheetexamples-formattingheader"></a>

With the below example you can change the color of **header1** to red and **header2** to blue:

```css
.wiki-content h1{ 
    color:red;
}
.wiki-content h2{ 
    color:blue;
}
```

If you want to change the style of the document title, you have to use another CSS class on **header1**:

```css
.wiki-title h1{
    font-style: italic;
}
```

### Formatting text <a href="#customstylesheetexamples-formattingtext" id="customstylesheetexamples-formattingtext"></a>

You can format bold texts by referring to the paragraph HTML element.

To change the text **align** to **justify**, include this in the stylesheet:

```css
p{
    text-align:justify;
}
```

To **strike through** a text, use this:

```css
p{
    text-decoration:line-through
}
```

### Formatting bold text <a href="#customstylesheetexamples-formattingboldtext" id="customstylesheetexamples-formattingboldtext"></a>

You can format bold texts by referring to the strong HTML element.

For example, this code sets the color of the bold texts to blue:

```css
strong{
    color:blue
}
```

### Setting the page size (PDF only) <a href="#customstylesheetexamples-settingpagesize-pdfonly" id="customstylesheetexamples-settingpagesize-pdfonly"></a>

You can use the `'@page'` rule to set the page size.

You can use absolute values:

```css
@page{
    size: <width> <height>;
}
```

Or you can use the paper size name:

```css
@page{
    size: A4;
}
```

### Using the page-bottom macro <a href="#customstylesheetexamples-pagebottommacro" id="customstylesheetexamples-pagebottommacro"></a>

Use the the page-bottom CSS class to format the page bottom macro.

```css
.page-bottom{
  border: 1px solid red;
}
```

### Using the code block macro <a href="#customstylesheetexamples-codeblockmacro" id="customstylesheetexamples-codeblockmacro"></a>

To have line breaks in code block macro, add the following:

```css
pre{
  white-space: pre-wrap;
}
```
