CSS Format not Appearing in Old Outlook

[automateuser109]

I have CSS code that I set to a specific table class id, as I have several HTML tables in an email and I only want the formatting to apply to the one. The formatting looks perfect in new outlook, but I have just found out that the formatting does not appear at all for users in old outlook. I assume this has to do with the table class ids in the CSS not translating properly in old outlook, but I am not sure how to proceed. Has anyone encountered this?  

[creativeopinion]

@automateuser109 Depending on the email client used by the email recipient—CSS might be completely ignored especially when defined in a <style> tag. It's always best practice to use inline CSS—however this doesn't guarantee that it will work on all email clients. 

Hope this helps!

If I helped you solve your problem—please mark my post as a solution ✅.
Consider giving me a 👍 if you liked my response!

👉 Level up your Power Automate skills by checking out my tutorials on YouTube
👉 Tips and Tricks on TikTok and Instagram

[David_MA]

To echo what @creativeopinion , inline is your best option for formatting e-mails. I have not had trouble using basic style formatting when you place this at the top of your e-mail for the Outlook actions. Just be sure you switch it to HTML mode or this code will actually come through in the e-mail. You could set your styles like this, and then use span styles for your overrides.

<style>
    Body {
        font-family: "Pangea Text", Arial, Helvetica, sans-serif;
    }
    h1,
    h2,
    h3,
    h4,
    h5 {
        color: #002766;
    }
    Table {
        font-family: "Pangea Text", Arial, Helvetica, sans-serif;
        background-color: #fff;
        border-collapse: collapse;
        min-width: 850px;
        border: 1px solid #b4b9be;
    }
    Table th {
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        background-color: #0091f7;
        color: #fff;
    }
th, td {
        padding: 8px;
        border: 1px solid #cdebff;
}
tr:nth-child(even) {background-color: #f4f6f2 }
</style>

Note, this line is not supported in Outlook: tr:nth-child(even) {background-color: #f4f6f2 }. I think it may be supported by some other e-mail clients and I am hopeful that one day Outlook will support it.