# Custom CSS in email

**URL:** <https://forum.mautic.org/t/custom-css-in-email/9225>\
**Category:** Product Support\
**Created:** [August 11, 2017, 2:07pm UTC](https://forum.mautic.org/t/custom-css-in-email/9225 "2017-08-11T14:07:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Geomians](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@Geomians](https://forum.mautic.org/u/Geomians)\
**Post date:** [August 11, 2017, 2:07pm UTC](https://forum.mautic.org/t/custom-css-in-email/9225/1 "2017-08-11T14:07:10Z")

</div>

Hi, I have just started exploring Mautic. I have built my own template for an email shot using Code Mode. I have custom CSS however it doesn’t load with the code, is there a way of doing this? Otherwise I’ve just wasted a few hours. I’ve tried googling this but cannot find the question or answer.  
  
  
  
Many thanks in advance.

---

<div class="post-metadata">

**Author:** ![Geomians](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@Geomians](https://forum.mautic.org/u/Geomians)\
**Post date:** [August 11, 2017, 2:07pm UTC](https://forum.mautic.org/t/custom-css-in-email/9225/2 "2017-08-11T14:07:10Z")

</div>

Hi, I have just started exploring Mautic. I have built my own template for an email shot using Code Mode. I have custom CSS however it doesn’t load with the code, is there a way of doing this? Otherwise I’ve just wasted a few hours. I’ve tried googling this but cannot find the question or answer.

Many thanks in advance.

---

<div class="post-metadata">

**Author:** ![chris0928](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/chris0928/32/118_2.png) [@chris0928](https://forum.mautic.org/u/chris0928)\
**Post date:** [August 11, 2017, 9:44pm UTC](https://forum.mautic.org/t/custom-css-in-email/9225/3 "2017-08-11T21:44:19Z")

</div>

Hi @Geomians - what is your experience with email development? The reason I ask is because using CSS in email is much more limited than using it in regular web projects that display in a browser, for example. But it’s also possible you’re running into a Mautic issue. If you want to share a bit of your email code I can try to provide some help.

---

<div class="post-metadata">

**Author:** ![Geomians](https://avatars.discourse-cdn.com/v4/letter/g/258eb7/32.png) [@Geomians](https://forum.mautic.org/u/Geomians)\
**Post date:** [August 15, 2017, 7:50am UTC](https://forum.mautic.org/t/custom-css-in-email/9225/4 "2017-08-15T07:50:51Z")

</div>

Hi @chris0928 , thanks for the reply. I’ve built emails in the past using email vision for a large corporate, although it was a while ago and I’ve all but forgotten. I know there is a restriction when using CSS in emails, however Mautic do use their own generic CSS in these emails, hence I’m a little puzzled as to why I can’t add my own. It took me quite a while to make it responsive too. I actually stole someone’s template (being a lazy sod) and ended up nearly completely re-inventing it. Anyway this is the stuff below.  
Cheers.

I tried to post the code but it doesn’t seem to want to let me, is there another way I can do it?

---

<div class="post-metadata">

**Author:** ![chris0928](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/chris0928/32/118_2.png) [@chris0928](https://forum.mautic.org/u/chris0928)\
**Post date:** [August 15, 2017, 7:58pm UTC](https://forum.mautic.org/t/custom-css-in-email/9225/5 "2017-08-15T19:58:38Z")

</div>

Hmm, if you’re modifying a template then I’d think that would work! If you want to share the Mautic public preview URL to the email, I can just view source. Probably cleaner than pasting a bunch of code here anyway 🙂

---

<div class="post-metadata">

**Author:** ![theatereleven](https://avatars.discourse-cdn.com/v4/letter/t/85e7bf/32.png) [@theatereleven](https://forum.mautic.org/u/theatereleven)\
**Post date:** [August 19, 2017, 8:18pm UTC](https://forum.mautic.org/t/custom-css-in-email/9225/6 "2017-08-19T20:18:22Z")

</div>

Hey @Geomians, I’ve had good luck with the code emails, since version 2.4.x. Below is sample code I use (and I just call in my own CSS file and Google webfonts. Ditched the tables and crap. So far works great.

```auto
<!DOCTYPE html>
<html>
<head>
<title>{subject}</title>
<link rel="stylesheet" href="https://yoursite.com/emails.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet" />
</head>
<body style="margin:0;padding:0;">
<div class="email-body"><br/><br/>

<!----------------------->
<!-- Email Starts Here -->
<!----------------------->

<!----------------------->
<!-- Email Ends Here -->
<!----------------------->

</div>

<p><div class="unsubscribe">{unsubscribe_text} | {webview_text}</div></p>

</div>

</body>
</html>

```