Magento 2: Email Templates Template Style is not Working

Question

In Template Content i have put

<p class="test">Hi</p>

Template Styles i have put

.test { font-size: 40px;}

Then i have clicked on Preview Template, but it's not applying.

I like to apply CSS for this template only.

Answer 1

First of all, we need to read here: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/templates/template-email.html#non-inline-styles.

For the Non Inline Styles, they must be in a <style type="text/css"></style> tag for them to work. In your case, we only need to include the header {{template config_path="design/email/header_template"}} in your custom email. Or, we can add the code lines below directly in the custom email:

<style type="text/css">
    {{var template_styles|raw}}
</style>

Answer 2

When switching the HTML editor on/off the tags get removed. Is there another solution to have Template Styles be included?