How to add styles into the <style>

If I try and add my own tag, it’s removed. I want to be able to add some styles that aren’t inlined, so that I can style links inside a WYSIWYG in Campaign Monitor which don’t exist yet when all the styles are inlined.

My plan is to add styles to the links, like:

.wysiwyg a { color: white; }

Is there a way I can do this sort of cascading style, or do all styles have to be inlined?

Which template do you use? Can you provide an example? In general there is a inlinecss setting:

See also https://www.npmjs.com/package/gulp-inline-css

Hi thanks for replying. I’m using a customised version of the default Foundation email index.
Thanks for pointing out this gulp settings file, I was searching through the Foundation docs only, didn’t know about this!

I’ve got it to not remove my tag now, which is excellent.

I don’t suppose there’s a way to inline all my CSS, AND also insert it into a element, for those email browsers that support it?

I’m currently not 100% sure but there was some logic in the gulpfile regarding this case.

See https://github.com/foundation/foundation-emails-template/blob/f4c0de73a34e07acabbf48f449be7d1911030569/gulpfile.babel.js#L116-L133 which replaces only the comment with the opening tag. Not sure how this works in combination with the other module.

If needed you can add your own logic in your gulpfile

In general I would put this into a scss file, import that / use it like your template / setup expects it and see if this code gets added.

I’m not comfortable with the gulp logic to write my own unfortunately, & it looks like none of the existing settings do what I described.

But I’ve managed to prevent it from removing additional tags at least, so I can include my own in my html file, and then add the css you quoted above.
The reason I couldn’t use this in the scss file is that it will only inline elements that exist at the time the template is compiled. Links get added to the email later, when editing in Campaign Monitor.