Enhance the Styling of your Emails with CSS

[Arne_Manthey]

Introduction

With release 2102 of the SAP Marketing Cloud the email lite editor has been enhanced with the capability of adding CSS (Cascading Style Sheet) code and assigning CSS classes to rows and columns of any email.

Before you read any further please also read the related post 'Styling Forms – Introduction' because it explains a lot of the basics on CSS.

Feature Overview

First of all you will find a new section on the page level in the email editor which allows you to insert your CSS code. This code will then be inserted as an inline style element in the final HTML email.

With this CSS code you can alter the styling of any element of your email if you know how to address it (using selector criteria).There is the possibility to change the overall style of standard elements, however, it is recommended to use your own CSS classes which you would introduce in your custom CSS code.

These custom CSS classes you can assign to either row or column elements of your email:

Example

The persona of my example is Julia. She is a marketeer at Sonic Inc. who delivers computer technology products and services to their customers. For the introduction of a new tablet she designs an introductory email.

She already did a great job of designing the email with the easy-to-use email lite editor. However, she now wants to achieve also the following:

• The main content area has to show a shadow effect


• The paragraphs need to be separated with a little more vertical space


• The company logo needs to be included as a background image to improve the mobile responsiveness behaviour

Important Note: Also please note that all CSS code I present here come without warranty - you need to try out for yourself and test everything thoroughly - especially for multiple screen sizes, devices or browsers! I would also recommend that you ensure you have a good understanding of HTML and CSS.

Here is the initial version of the email without any custom CSS styling:

Note, that the column which holds the header title text elements has already some left padding (70px) assigned to reserve space for the logo. In the page properties Julia now enters the CSS code snippet which was provided by one of her colleagues who recently took a course on CSS:

Please note that the main content of the email now shows a shadow effect. This was accomplished by some knowledge on the HTML DOM structure of the email. The class used here is 'TopLevelContainer':

.TopLevelContainer {

   box-shadow: 3px 3px 20px rgba(0,0,0,0.5);

}

Then there is the part which adds a little more space between the paragraphs of the message text:

p {

   margin-bottom: 5px;

}

If you followed my other posts on CSS you might wonder why I did not put some specific class before the 'p' element. As you might recall a CSS definition like this might mess up the entire UI since it is not specific enough. Luckily we have included a safeguarding mechanism which automatically adds such a prefix class before every CSS statement. This makes sure that all styling is only applied inside the email.

Lastly Julia needs to assign a special class to the column element in the header:

As you can see, the logo now appears right left of the title texts by assigning the CSS class 'sonic-header-logo' to that column. This is done by the following style declaration:

.sonic-header-logo {

   background-image:    url('https://sonic.com/img/Sonic_Logo.png') !important;

   background-repeat:   no-repeat !important;

   background-position: left +0px center !important;

   background-size:     60px !important;

}

To check if the style works well both for desktop and mobile, Julia looks at the previews:








That's it! Julia has successfully solved the remaining styling issues.

Conclusion

After reading this post you should be able to adapt the styling of your emails going beyond the built-in capabilities of the email lite editor.

If you are looking for more posts on styling with CSS for other content objects please check the link list of other posts of my CSS series in my initial post 'Styling Forms – Introduction'.