---
title: "Styling Emails with CSS - Convert Forms"
description: "Convert Forms allows you to style your email content using CSS, giving you full control over how your emails look. You can apply styles either directl"
url: "https://www.tassos.gr/docs/convert-forms/email-notifications/styling-emails-with-css"
date: "2026-04-07T06:45:52+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Convert Forms ](https://www.tassos.gr/index.php?option=com_content&view=category&id=43) / [ Email Notifications ](https://www.tassos.gr/index.php?option=com_content&view=category&id=79)

#  Styling Emails with CSS

Convert Forms allows you to style your email content using CSS, giving you full control over how your emails look. You can apply styles either directly in the **Body** using a `<style>` block or through the dedicated **Email CSS Styles** option.

## [Using &lt;style&gt; Blocks in the Email Body](#using-style-blocks-in-the-email-body)

You can add a CSS `<style>` block directly into the **Body** of your email. To do so, while you're using **Email Task**, scroll down to the **Body** option, click the 3-dot icon, and then click the last button to open the **Source Code** dialog.

 [ ![StyleBlocksInBodyButton](https://www.tassos.gr/images/2025/07/StyleBlocksInBodyButton.png?v=2) ](https://www.tassos.gr/images/2025/07/StyleBlocksInBodyButton.png?v=2)

Next, enter your CSS rule using a &lt;style&gt; block like in the example below:

 [ ![StyleBlocksInBody](https://www.tassos.gr/images/2025/07/StyleBlocksInBody.png) ](https://www.tassos.gr/images/2025/07/StyleBlocksInBody.png)

**Advantages:**

- **Styles are visible in the editor preview**, allowing you to see exactly how your email will look while editing.
- Helpful for fine-tuning the layout with live visual feedback.

## [Using the Email CSS Styles Option](#using-the-email-css-styles-option)

Alternatively, you can use the **Email CSS Styles** field to enter your CSS rules without any `<style>` tags.

 [ ![Add CSS Rules to Emails](https://www.tassos.gr/images/2025/07/Add_CSS_Rules_to_Emails.png?v=1) ](https://www.tassos.gr/images/2025/07/Add_CSS_Rules_to_Emails.png?v=1)

This is ideal if:

- You want to **keep styling separate** from your email content.
- You don’t want to deal with HTML or `<style>` blocks.
- You’re using dynamic content or shared templates across forms.
- You prefer a cleaner, more maintainable setup.

**Example:**

 ```
body {
  background-color: #f8f8f8;

  font-size: 16px;
}
a {
  color: #0073aa;

}

```

Convert Forms will automatically process this CSS and apply it as inline styles in the final email.

## [Example CSS Rules](#example-css-rules)

### [Background Color](#background-color)

Changes the background color of your email from white to light gray.

 ```
body {
  background-color: #ccc;

}

```

### [Font Size](#font-size)

Sets a larger base font size for better readability.

 ```
body {
  font-size: 20px;
  line-height:24px;
}

```

### [Link Color](#link-color)

Set all links to have a blue color and be underlined.

 ```
a {
  color: blue;
  text-decoration: underline;
}

```

### [Set a Max Width and Center the Email](#set-a-max-width-and-center-the-email)

This ensures your email appears centered and doesn't stretch too wide on large screens.

 ```
body {
  max-width: 600px;
  margin: 0 auto;
}

```

## [How CSS Rules Work in Emails](#how-css-rules-work-in-emails)

Regardless of the method you choose, Convert Forms automatically **inlines all CSS styles** before sending the email. This ensures maximum compatibility with email clients, many of which ignore `<style>` tags but fully support inline styles.

Here’s how it works:

- Convert Forms scans your CSS rules and finds all matching HTML elements in your email content.
- It then applies those rules directly as inline styles (using the style attribute).
- If an element already has a style attribute, the new rules are merged instead of replaced.

If your CSS includes:

 ```
a {
  color: blue;
}

```

And your email contains:

 ```
<a href="#">My link</a>

```

Convert Forms will transform it into:

 ```
<a href="#" style="color: blue;">My link</a>

```

If the element already had inline styles:

 ```
<a href="#" style="text-decoration: none;">My link</a>

```

It becomes:

 ```
<a href="#" style="text-decoration: none; color: blue;">My link</a>

```

This process happens automatically in the background before the email is sent. You don’t need to manually inline your styles.

## [Final Notes](#final-notes)

- All CSS is automatically converted to inline styles by Convert Forms before the email is sent—no manual steps required.
- You can target standard HTML elements like `body`, `html`, `a`, `p`, etc.
- Convert Forms automatically adds missing `<head>` and `<body>` tags to your email if they’re not present—so you don’t need to worry about including them manually.
- For the best results across different email clients, always test your emails before sending them to your audience.

 Last updated on Jul 3rd 2025 12:07

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Convert Forms",
            "item": "https://www.tassos.gr/docs/convert-forms"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Email Notifications",
            "item": "https://www.tassos.gr/docs/convert-forms/email-notifications"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Styling Emails with CSS",
            "item": "https://www.tassos.gr/docs/convert-forms/email-notifications/styling-emails-with-css"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/convert-forms/email-notifications/styling-emails-with-css"
    },
    "headline": "Styling Emails with CSS",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/convert-forms/email-notifications/styling-emails-with-css"
    },
    "datePublished": "2025-07-01T15:19:44+03:00",
    "dateCreated": "2025-07-01T15:19:44+03:00",
    "dateModified": "2025-07-03T12:44:13+03:00"
}
```