Skip to main content
Solved

Can we incorporate CSS in an email send?

A

I’m trying to incorporate CSS styling in my email sends but am finding that there is a discrepancy between what I see in the preview, and what users see. Has anyone else had this problem?

Example 1: I am able to set the font of H1 within my <style> tags. Looks great in InSided. Then the email is sent and the font reverts to Times New Roman in Gmail, Yahoo, and Outlook

Example 2: I tried to incorporate collapsible elements in my emails. They look correct in InSided. In Gmail, the styling is completely gone. The check-boxes which were turned into arrows in the CSS turn into the basic check-boxes. 

 

I’m wondering if anyone else has had this problem? Is CSS not allowed in emails?

 

I’m happy to share my code if needed but I’m not a web developer so it’s probably a little ugly. I’m trying to do basic functionality testing before making it look nice. 

 

Edit: I see in the Knowledge base that CSS should technically be possible, so I’m adding my code here for reference. In the image below, you can see the InSided output (top) and what the email looks like in Gmail (bottom). Anyone have any ideas?

 

 

Best answer by Cristina

Hi @alexandra.culler! Thank you for this question and the information you shared! 

Email clients are notoriously picky with what they accept, especially around email styling. For example, <style> tags are mostly a no-go, as most styles have to be inlined. One of our engineers recommended this read around using CSS in HTML emails and this particular one might be useful as you’re using position in the CSS code which seems to be poorly supported. 

For extra design capabilities, the MJML framework might be a cool one to try out. Hope this helps! 

 

View original
Did you find this topic helpful?

3 replies

A

Note: Here is a very very simplified version. Again, the collapsing works on the InSided preview but does not work when the email is received. 

Show content

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsibleList li > input + * {
 display: none;
}
 
.collapsibleList li > input:checked + * {
 display: block;
}

.collapsibleList li > input {
 display: none;
}

.collapsibleList label {
 cursor: pointer;
}
</style>
</head>
<body>

<ul class="collapsibleList">
 <li>
  <label for="mylist-node1">Click to open list 1</label>
  <input type="checkbox" id="mylist-node1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="mylist-node2">Click to open list 2</label>
  <input type="checkbox" id="mylist-node2" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>

</body>
</html>

 

Cristina
Forum|alt.badge.img+1
  • Cristina
  • Helper ⭐️⭐️⭐️
  • 530 replies
  • Answer
  • April 12, 2021

Hi @alexandra.culler! Thank you for this question and the information you shared! 

Email clients are notoriously picky with what they accept, especially around email styling. For example, <style> tags are mostly a no-go, as most styles have to be inlined. One of our engineers recommended this read around using CSS in HTML emails and this particular one might be useful as you’re using position in the CSS code which seems to be poorly supported. 

For extra design capabilities, the MJML framework might be a cool one to try out. Hope this helps! 

 

bjoern_schulze
A
2 people like this
  • bjoern_schulze
    bjoern_schulze
  • A
    alexandra.culler
A

Thanks @Cristina! I’ll take a look at these resources 🙂.  

Update: The MJML framework is really cool! Unfortunately my attempts to get a collapsible element will not work, even with this. It appears Gmail restricts the MJML accordion just like it restricts the CSS attempts. Thanks for the guidance, Cristina! The MJML will definitely be useful for other elements, I’m sure ^_^. 

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings