Newsletter Editor: Inline CSS in HTML Newsletters

You’ve put a lot of effort into the design of your newsletter and want it to end up in your recipient’s inbox exactly as you created it. After all, when you’re sending newsletters, an appealing design is important and essential.  

Some email clients like Gmail only show inline CSS styles now. What does CSS or Inline CSS mean, how do you get into the source code of the newsletter or an element and how can you easily convert your styles into Inline CSS in our newsletter editor?

What is CSS/ Inline CSS?

CSS is short for “Cascading Style Sheets” and is a computer language that can be used to specify and define the design of an electronic document (e.g. website, newsletter). Follow our simple instructions to customize elements such as layout, color, and typography. They are displayed in source code.

One way to format CSS in a web document is to combine all style specifications in one central area. That’s what inline CSS is for. Some email clients, such as Gmail, AOL Mail and Yahoo, now only display inline CSS in newsletters.

Adjusting the Source Code of An Email

To get to the source code of your email in our newsletter editor, click on [Editor] and [Source code] int the top right corner.

Define and save the style for your newsletter.

Editing the Source Code of An Element

You can navigate to the source code of an element in our newsletter editor and adjust it. When moving the mouse to your element, an orange frame appears. Click on </> to get to the source code of an element:

Define and save your style.

Inline CSS in the Newsletter Editor

To automatically convert the styles to inline CSS styles, open your email in our newsletter editor. Click on the three dashes on the right:

You can now activate the conversion of all styles to [Inline CSS]:

CSS Area Example

This is how a style area in the source code of your newsletter could look like:

<style>

2    /* @title Test */

3    .classtest

4    {

5    font-size: 13px;

6    font-family: Arial, sans-serif;

7    line-height: 21px;

8    color: #262626;

9    margin: 0pt;

10    padding: 0pt;

11    text-decoration: underline;

12    border: 0px solid #000000;

13    background-color: #370707;

14    }

15  </style>

16

Set and style additional CSS areas:

1/*  @title Footer

2        @group Footer */

3        .footer {

4        background-color: #A7C5A1;

5     font-size: 10px;

6     color: #ACE950;

7     width: 600px;    

8     margin: 0pt;

9        padding: 15px;

10        font-family: verdana;    

11        }

Help & Support

If you have any questions or need further assistance, please contact our service team at any time.