Magento 2: Override/extend the email.css that is being used in the transactional email header

You can check the official documentation here : http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/templates/template-email.html

The general steps :

  • Create a Magento 2 frontend theme
  • Upload your custom logo here : app/design/frontend/Vendor/Theme/Magento_Email/web/logo_email.png
  • Edit the header and footer parts here : app/design/frontend/Vendor/Theme/Magento_Email/email/header.html and app/design/frontend/Vendor/Theme/Magento_Email/email/footer.html
  • Edit the sales email templates for example here : app/design/frontend/Vendor/Theme/Magento_Sales/email/order_new.html
  • Add your custom styles here for common emails : app/design/frontend/Vendor/Theme/web/css/source/_email-extend.less
  • Add your custom less variables here for common emails : app/design/frontend/Vendor/Theme/web/css/source/_email-variables.less
  • Add your custom styles here for sales emails : app/design/frontend/Vendor/Theme/Magento_Sales/web/css/source/_email.less

And the final step is to upgrade the Magento 2 Emogrifier library in order to fix bugs with inline css generation.

Update your root composer.json and add this require line :

"pelago/emogrifier": "1.2.0 as 0.1.1"

Then do a composer update and your mail css should be working.