internal vs inline css in templates - styling paragraphs in multiline

Hi. I'm new here. And a tad confused.

First of all, can we agree that inline css is what you add to a particular html element (example: <p style="...">) and that internal css is something else (css in a <style> section in an html document).

The campaign monitor design guidelines explicitly says "Always move your CSS inline" and suggests using premailer to do this. Looking at the sample templates they use a combination of inline and internal styles.

Questions.
1. Is it a good practice to use an internal style section in my template, and will these be (correctly) converted to inline styles by campaign monitor? Or should I take care of this myself prior to uploading the template files?

2. What's the best way to add style info that applies to paragraphs inside a multiline? Specifically I want to control the padding below paragraphs that are added in the online editor when editing the content of a multiline. If I add a <style>P{...}</style> section in an internal css, will this be applied (copied inline) to those paragraphs? Or only to paragraphs that are actually in the template html (as opposed to paragraphs added in the content)?

roshodgekiss roshodgekiss, 5 years ago

Hi papafreud, happy to clarify things for you here.

1. Is it a good practice to use an internal style section in my template, and will these be (correctly) converted to inline styles by campaign monitor? Or should I take care of this myself prior to uploading the template files?

Personally, I'd stick to internal styles, if using Campaign Monitor to send your campaigns. While we convert any internal styles into inline styles on import (correctly), many other email marketing apps don't. That's why we generally tell people to inline their styles first.

. What's the best way to add style info that applies to paragraphs inside a multiline? Specifically I want to control the padding below paragraphs that are added in the online editor when editing the content of a multiline.

Using p { ... } is a good approach and styles should be copied inline accordingly. Alternately, you can surround the multiline with <span style="..."></span> tags, or apply inline styles to the table cell the <multiline> is nested in.

Thanks, papafreud! Hope this sets you on the right track, but let us know if you have any further questions :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
papafreud, 5 years ago

OK, thanks. And yes, I tried it and everything does seem to work using internal styles, even on paragraphs added in the content editor. Sweet - this will make my template files a lot cleaner.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098