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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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"}}
</style>
</head>
<body>
{{inlinecss file="css/email-inline.css"}}
<!-- Begin Content -->
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.
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.
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"}}
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%">
<!-- ... -->
</table>will result in a HTML code like this.
<table class="wrapper" width="100%" style="margin: 20px auto;">
<!-- ... -->
</table>inlinecss directives are always processed by
the parent template and not by the child template.