Print Templates - Styling

  • Updated

This is one article in a series of articles about Print Templates.

Print Templates can be styled using the standard HTML styling attributes. In this article we will include a few examples. For more in-depth HTML styling, we recommend you look at HTML-CSS styling examples on the Internet. 


HTML tags can be styled by adding a style attribute to the tag. Take the header <h1></h1> tag as an example. If we want to add an underline under the header, we can do that.

<h1 style=’text-decoration: underline’>Customer</h1>

Adding styles directly to HTML tags is cumbersome and it makes it harder to read. A better option is to define the styles separately from the HTML tags. In the BookingCentral Print Templates, this is accomplished by adding a style tag at the top of the document.

h1 {text-decoration: underline;}

In the example above, we are modifying the style for the header tags. So every time we have a <h1></h1> header, it will add an underline under the text.


Modifying the style for a tag is great, but it won’t help us if we need different styles for the same tag. The division tag <div></div>, the span tag <span></span> and paragraph tag <p></p> are examples of tags where you almost always will end up with different styles.

Enter classes. A class is a way to make an association between styles and tags.

To define a class in our style section, we need to prefix with a period. Here we define a class named label

.label {box-sizing: border-box; font-size: .8em;color: #555555;padding-bottom: 3px;}

After defining the class, we can use it in our HTML by adding the class to the tag, e.g. 

<div class=”label”>Customer Name</div>

A class can be used by multiple tags and a tag can include multiple classes, separated by space.

Here is the full HTML for our simple customer print.

h1 {text-decoration: underline}
.label {box-sizing: border-box; font-size: .8em;color: #555555;padding-bottom: 3px;}
<td style="width: 33%;"><div class="label">Customer</div>${}</td>
<td style="width: 33%;"><div class="label">Phone</div>${}</td>
<td style="width: 33%;"><div class="label">Email</div>${}</td>

See related articles on Print Templates:

Print Templates Overview

Print template keywords

How to use conditional formatting in a print template

How to create a table in a print template


Was this article helpful?

1 out of 1 found this helpful

Have more questions? Submit a request