NetSuite Advanced PDF templates support HTML and inline CSS for controlling the layout, fonts, colors, and overall look of your transaction documents. Styling with CSS helps you create professional and branded invoices, sales orders, statements, and more.
This page covers the best CSS techniques for Advanced PDF and includes practical examples.
🔹 Why Use CSS in Advanced PDF?
- Improve readability with consistent fonts and spacing
- Align amounts, dates, and labels neatly
- Apply branding colors (headers, footers, highlights)
- Add borders, shading, and alignment to tables
- Control page breaks and margins for print-friendly layouts
🔹 Basic Inline Styling
<p style="font-size:14px; font-weight:bold; color:#2E86C1;">
Invoice #: ${record.tranid}
</p>
<p style="font-size:12px; color:#555;">
Date: ${record.trandate?string("MMMM dd, yyyy")}
</p>
✔️ Inline styles are recommended because external CSS files are not supported in PDFs.
🔹 Table Styling
<table width="100%" style="border-collapse: collapse; font-size:12px;">
<tr style="background:#f2f2f2; font-weight:bold;">
<th style="border:1px solid #ccc; padding:5px;">Item</th>
<th style="border:1px solid #ccc; padding:5px;">Description</th>
<th style="border:1px solid #ccc; padding:5px; text-align:center;">Qty</th>
<th style="border:1px solid #ccc; padding:5px; text-align:right;">Rate</th>
<th style="border:1px solid #ccc; padding:5px; text-align:right;">Amount</th>
</tr>
<#list record.item as i>
<tr>
<td style="border:1px solid #ddd; padding:5px;">${i.item}</td>
<td style="border:1px solid #ddd; padding:5px;">${i.description}</td>
<td style="border:1px solid #ddd; padding:5px; text-align:center;">${i.quantity}</td>
<td style="border:1px solid #ddd; padding:5px; text-align:right;">${i.rate?string["#,##0.00"]}</td>
<td style="border:1px solid #ddd; padding:5px; text-align:right;">${i.amount?string["#,##0.00"]}</td>
</tr>
</#list>
</table>
✔️ Borders, padding, and alignment improve readability.
🔹 Alternating Row Colors (Zebra Striping)
<#list record.item as i>
<tr <#if i_index % 2 == 0>style="background:#f9f9f9;"</#if>>
<td style="padding:5px;">${i.item}</td>
<td style="padding:5px;">${i.description}</td>
<td style="padding:5px; text-align:center;">${i.quantity}</td>
<td style="padding:5px; text-align:right;">${i.rate?string["#,##0.00"]}</td>
<td style="padding:5px; text-align:right;">${i.amount?string["#,##0.00"]}</td>
</tr>
</#list>
✔️ Makes large tables easier to scan.
🔹 Headers & Footers Styling
<div style="text-align:center; font-size:16px; font-weight:bold; color:#2E4053;">
${record.companyname}
</div>
<div style="text-align:center; font-size:11px; color:#555;">
${record.mainaddress}
</div>
<hr style="border:1px solid #ccc; margin:10px 0;" />
✔️ Adds a professional header with branding.
🔹 Page Breaks
Sometimes you need content to start on a new page.
<div style="page-break-before:always;"></div>
✔️ Forces the next section onto a new page.
🔹 Highlighting Important Fields
<p style="background:#FFEB3B; padding:5px; font-weight:bold;">
Total Due: ${record.total?string["#,##0.00"]} ${record.currency}
</p>
✔️ Draws attention to amounts due.
✅ Best Practices
- Always use inline CSS (
style="...") - Use web-safe fonts: Arial, Times New Roman, Courier New
- Keep table borders and spacing consistent
- Avoid very large images (slows down PDF rendering)
- Test across multiple records and page lengths
✅ Summary — What You Learned
By the end of this page, you know how to:
- ✅ Apply inline CSS for fonts, colors, and sizes
- ✅ Style tables with borders, padding, and alignment
- ✅ Use alternating row colors for readability
- ✅ Create professional headers and footers
- ✅ Control page breaks for long PDFs
- ✅ Highlight important fields with background colors
This sets you up for the next page: Common Errors & Fixes, where you’ll learn how to troubleshoot broken templates, empty fields, and formatting issues.
Leave a Reply