fivedoor-gists/email-target-outlook

## email-target-outlook
<!--
========================== OUTLOOK TARGET NOTES ==========================

The mso number within the conditional tags refers to which Outlook version you are targeting.
There are other mso numbers to target different versions of Outlook:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15

WARNING:
Trying to specifically target Outlook 2000 ([if mso 9]), 2002 ([if mso 10]), or 2003([if mso 11]) does not seem to work. When it comes to targeting Outlook 2000, 2002, and 2003 using [if IE] is your best bet.
On the other hand, Outlook 2007 and up responds very well to targeting specific versions with mso numbers such as [if mso 15] for Outlook 2013 or [if mso 12] for Outlook 2007.


WARNING:
I have found with conditional CSS that is really matters that the !important is there and that is has a space before it. It looks like you already have that correct, although one of your rules background: blue; did not have !important.

So, for example...

li {padding-left: 2px!important;}

Will not work, instead you need to write:

li {padding-left: 2px !important;}

Check the code being output carefully.. some ESPs also add the !important even if you already have it, so you might also being ending up with !important !important which will mean they won't work.

https://litmus.com/community/discussions/396-conditional-code-for-outlook

========================= / OUTLOOK TARGET NOTES =========================
-->


<!-- Target Outlook 2007 and up
===============================-->
<!--[if mso]>
<style type=”text/css”>
     /*Your styles here*/
</style>
<![endif]-->


<!-- Target Outlook 2007 and up
===============================-->
<!--[if IE]>
<style type=”text/css”>
     /*Your styles here*/
</style>
<![endif]-->


<!-- Target all Outlook versions
================================-->
<!--[if (gte mso 9) | (IE)]>
<style type=”text/css”>
     /*Your styles here*/
</style>
<![endif]-->


<!-- Target all email clients except Outlook
============================================-->
<!--[if !mso]><!-->
Your styles or content here
<!--<![endif]-->


<!-- Hide elements from Outlook with mso-hide:all
============================================-->
<table style=”mso-hide:all;”></table>


<!-- Target Using Conditional Class
============================================
https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
-->
<style type="text/css">

  h1 {
    font-family: Telefon, sans-serif;
  }
  .mso h1 {
    font-family: sans-serif !important;
  }
</style>

<!--[if mso]><body class="mso"><![endif]-->
<!--[if !mso]><!--><body><!--<![endif]-->
	<!--
	========================== OUTLOOK TARGET NOTES ==========================

	The mso number within the conditional tags refers to which Outlook version you are targeting.
	There are other mso numbers to target different versions of Outlook:

	Outlook 2000 = mso 9
	Outlook 2002 = mso 10
	Outlook 2003 = mso 11
	Outlook 2007 = mso 12
	Outlook 2010 = mso 14
	Outlook 2013 = mso 15

	WARNING:
	Trying to specifically target Outlook 2000 ([if mso 9]), 2002 ([if mso 10]), or 2003([if mso 11]) does not seem to work. When it comes to targeting Outlook 2000, 2002, and 2003 using [if IE] is your best bet.
	On the other hand, Outlook 2007 and up responds very well to targeting specific versions with mso numbers such as [if mso 15] for Outlook 2013 or [if mso 12] for Outlook 2007.


	WARNING:
	I have found with conditional CSS that is really matters that the !important is there and that is has a space before it. It looks like you already have that correct, although one of your rules background: blue; did not have !important.

	So, for example...

	li {padding-left: 2px!important;}

	Will not work, instead you need to write:

	li {padding-left: 2px !important;}

	Check the code being output carefully.. some ESPs also add the !important even if you already have it, so you might also being ending up with !important !important which will mean they won't work.

	https://litmus.com/community/discussions/396-conditional-code-for-outlook

	========================= / OUTLOOK TARGET NOTES =========================
	-->


	<!-- Target Outlook 2007 and up
	===============================-->
	<!--[if mso]>
	<style type=”text/css”>
	/Your styles here/
	</style>
	<![endif]-->


	<!-- Target Outlook 2007 and up
	===============================-->
	<!--[if IE]>
	<style type=”text/css”>
	/Your styles here/
	</style>
	<![endif]-->


	<!-- Target all Outlook versions
	================================-->
	<!--[if (gte mso 9) \| (IE)]>
	<style type=”text/css”>
	/Your styles here/
	</style>
	<![endif]-->


	<!-- Target all email clients except Outlook
	============================================-->
	<!--[if !mso]><!-->
	Your styles or content here
	<!--<![endif]-->


	<!-- Hide elements from Outlook with mso-hide:all
	============================================-->
	<table style=”mso-hide:all;”></table>


	<!-- Target Using Conditional Class
	============================================
	https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
	-->
	<style type="text/css">

	h1 {
	font-family: Telefon, sans-serif;
	}
	.mso h1 {
	font-family: sans-serif !important;
	}
	</style>

	<!--[if mso]><body class="mso"><![endif]-->
	<!--[if !mso]><!--><body><!--<![endif]-->