Styles

There are multiple ways to specify styles for PDFs, and you can choose the most suitable method for your needs.

Upload from Dashboard

You can upload CSS files from dashboard > files and reference them in your HTML.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 class="title">Hello World</h1>
  </body>
</html>

External CSS References

You can directly reference CSS files that are already hosted on the internet, such as from CDNs.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.tailwindcss.com" />
  </head>
  <body>
    <h1 class="text-3xl font-bold">Hello World</h1>
  </body>
</html>

However, this method has some disadvantages:

Increased generation time due to external file loading
Potential impact from temporary CDN service outages
Risk of referenced files being changed or deleted without notice

To avoid these risks, we recommend uploading CSS files through the dashboard as mentioned above.

Inline Styles

You can write styles directly in the HTML file. There are two methods: using the <style> tag or specifying the style attribute directly on elements.

Using style tag

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title {
        color: #333;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 class="title">Hello World</h1>
  </body>
</html>

Using style attribute

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: #333; font-size: 24px; font-weight: bold;">
      Hello World
    </h1>
  </body>
</html>

Inline styles are suitable for:

Applying dynamically generated styles
Applying different styles for each PDF
Simple one-time styling needs

Images Pages