Magento 2 email template style directives

I would like to explain the css and inlinecss directives and the variable template_styles of Magento 2 email templates in this post.

We will use a reduced version of the Magento_Email::/email/header.html template as example.

<!--@subject {{trans "Header"}} @-->
<!--@vars {
"var logo_height":"Email Logo Image Height",
"var logo_width":"Email Logo Image Width",
"var template_styles|raw":"Template CSS"
}} @-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        {{var template_styles|raw}}

        {{css file="css/email.css"}}
{{inlinecss file="css/email-inline.css"}}
<!-- Begin Content -->

The template_styles variable

The variable template_styles is just the CSS that you can inject into the textarea Template Styles that you see in the admin area. This part can be always different for every template.

Magento 2 email template css directives

The important part is for the css directive is {{css file="css/email.css"}} inside of the style tag. The content of css/email.css will be injected into the style tag.


You may ask yourself at the moment, where can I find this css/email.css and how can inject my CSS into this file? If you have deployed your static files, the file should be under pub/static/frontend/[theme_vendor]/[theme_name]/[locale]/css/email.css. For example pub/static/frontend/Magento/blank/en_US/css/email.css. You can find the related less file in your current theme under web/css/email.less.

Relative module path

It is also possible to use the relative module path for a CSS file. For example something like this.

{{css file="Magento_Sales::css/filename.css"}}

Magento 2 email template inlinecss directives

The inlinecss is a little bit special. The important part is here {{inlinecss file="css/email-inline.css"}}. You can find the related less file in your current theme under web/css/email-inline.less. The CSS rules of the Inline-CSS will be applied with an filter to the HTML content. For exmaple the Inline-CSS rule

.wrapper {
    margin: 20px auto;

with the following HTML code

<table class="wrapper" width="100%">
    <!-- ... -->

will result in a HTML code like this.

<table class="wrapper" width="100%" style="margin: 20px auto;">
    <!-- ... -->
Next Previous