How to add css in zoho mail templates

Zoho Mail allows you to add custom CSS to your email templates to enhance the design and layout. Here are the steps to add CSS to your Zoho Mail templates:

Method 1: Using the Zoho Mail Template Editor

Log in to your Zoho Mail account and go to the "Templates" section.
Click on the template you want to edit and then click on the "Edit" button.
In the template editor, click on the "HTML" tab.

In the HTML code, add your CSS code inside the <style> tags. For example:

<style>
/* Your CSS code here */
body {
 background-color: #f2f2f2;
}
.header {
 background-color: #333;
 color: #fff;
}
</style>

Save the changes to the template.

Method 2: Using an external CSS file

Create a new file with a .css extension (e.g., style.css) and add your CSS code to it.
Upload the CSS file to your website or a cloud storage service like Google Drive or Dropbox.
In your Zoho Mail template, add a link to the external CSS file using the <link> tag. For example:
```
<link rel="stylesheet" type="text/css" href="https://example.com/style.css">
```
Replace https://example.com/style.css with the actual URL of your CSS file.
Save the changes to the template.

Tips and limitations

Zoho Mail supports CSS3, but some advanced features like CSS grid and flexbox may not work as expected.
You can only add CSS code to the <head> section of your email template using the Zoho Mail Template Editor.
If you're using an external CSS file, make sure to test it thoroughly to ensure it works correctly across different email clients and devices.
Zoho Mail has some limitations on the amount of CSS code you can use. If you exceed the limit, your CSS code may not be applied correctly.

By following these steps, you should be able to add CSS to your Zoho Mail templates and enhance their design and layout.

Mail Knowledge

How to add css in zoho mail templates