This site was built to compliment the existing NetSuite Professionals Slack Community by adding a means for members to easily find answers to common questions and to create a searchable database of those questions and answers.

NetSuite Professionals

CSS in template editor
Just to clarify : PDF print is separate in two subprocess
first &gt; convert template into pure HTML
second &gt; convert HTML into PDF

Just imagine, you are web developer and you are creating WEB page (HTML) ... You are using CSS for styling, formating ... the same is with PDF templates in NetSuite

NS uses BFO to make the PDF from HTML and it is not good with modern CSS and ignores many tags you might be used to using.

here is some code from one of our advanced layouts. maybe you can see what elements we use and BFO sees

&lt;table class="product-table product-table-type-1" border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;!-- show all the included items in the package --&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;img src="---image---" width="15" /&gt;&lt;/td&gt;
        &lt;td valign="middle"&gt;
            &lt;img src="--image---" width="160" height="100"/&gt;
        &lt;/td&gt;
         &lt;td&gt;&lt;img src="--image --- " width="15" /&gt;&lt;/td&gt;
         &lt;td style="padding: 10px 10px 10px 10px;" valign="middle"&gt;
            &lt;img
               src="--image --- "
               style="width: 72px; height: 25px; margin-left: -8px; transform: rotate(0deg);" /&gt;
            &lt;p style="font-size: 22px; font-weight: 600; margin: 5px 0;"&gt;${itemName}&lt;/p&gt;
            &lt;p style="margin: 10px 0; font-size: 12px;"&gt;
               ${itemdesc}
            &lt;/p&gt;
            &lt;p style="font-size: 10px; margin: 5px 0;"&gt;Quantity : ${item.quantity}&lt;/p&gt;
         &lt;/td&gt;
         &lt;td&gt;&lt;img src="---image---" width="15" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
   &lt;/table&gt;

&lt;link rel="stylesheet" href="<https://use.typekit.net/qzn6ede.css>" /&gt;

&lt;style type="text/css"&gt;
      * body {
         margin: 0;
         padding: 0;
         font-family: azo-sans-web, sans-serif;
      }

      th {
         font-weight: bold;
         vertical-align: middle;
         padding: 5px 6px 3px;
         color: #FFFFFF;
         height: 100px;
      }

      .nav-table {
         width: 100%;
         margin: 0 auto;
         border-spacing: 0;
         background-color: #0072CE;
      }

      .nav-table tr td table {
         width: 820px;
         margin: 0 auto;
         padding: 0 15px;
      }

      .nav-table tr td table tr th.th-1 {
         text-align: left;
      }

      .nav-table tr td table tr th.th-2 {
         text-align: right;
         font-size: 34px;
      }

      .header-table {
         width: 820px;
         padding: 30px 30px 30px 30px;
         margin: 0 auto;
      }

      .header-table tr td.header-content {
         width: 200px;
         table-layout: fixed;
      }

      .title {
         font-size: 28px;
         font-weight: 600;
         text-align: center;
         color: #0072CE;
      }

      .product-table {
         width: 100%;
         /* padding: 30px 30px 30px 30px; */
         margin: 0 auto;
      }

      .product-table tr {
         margin: 32px auto;
      }
   &lt;/style&gt;