CSS

Add a CSS file to your template

The best way to add styling is to create a separate CSS file within your template.

Create a new file called styles.css in your template file explorer.
Paste this example CSS into your newly-created styles.css file:


h1 {
  color: red;
}

You can now refer to your stylesheet in your HTML. Note that when referring to Letterhead-hosted files or assets, just use a relative path (i.e., only the filename).


<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello world!</h1>
</body>
</html>

Self-hosted CSS

If it’s not feasible to keep all of your CSS in template files, you can also link to self-hosted CSS files.


<html>
<head>
  <link rel="stylesheet" href="https://yourdomain.com/styles.css">
</head>
<body>
  <h1>Hello world!</h1>
</body>
</html>

Tailwind CSS

To use Tailwind, we recommend using the Play CDN distribution of Tailwind, which you can optionally customise by assigning your configuration to tailwind.config in a <script> tag.


<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-clifford">
    Hello world!
  </h1>
</body>
</html>