Adding Outlook-only CSS to an HTML email
Outlook can render an HTML email differently from other clients. When one of those differences needs its own CSS, Microsoft conditional comments let you target Outlook without sending the rules to everyone else.
Place the conditional block after your main CSS:
<!--[if gte mso 9]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->
gte mso 9 means Microsoft Office version 9 or newer. Email HTML is full of historical compromises, and this is one of the more useful ones when a normal rule cannot make Outlook cooperate.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- Better Line Breaks With CSS balance and pretty
Use text-wrap balance for short headings and text-wrap pretty selectively for longer copy without hard-coded line breaks.
- Why 100vh Doesn’t Always Fit a Mobile Screen
Choose svh, lvh, dvh, or a flexible min-height when mobile browser controls make 100vh an awkward fit.
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.