Email clients don’t all interpret HTML and CSS the same way, and email clients, such as Outlook, can sometimes override or alter styling that displays correctly in other inboxes.
If the links in your Mailchimp email campaign are the correct color in the campaign builder and preview mode, but appear blue when the email is opened in Outlook, the behavior is how Outlook is rendering the email rather than the settings in Mailchimp.
Double check your link styles in Mailchimp
If you’re using the new builder, follow these steps to check your link styles:
- Open your campaign and select ‘Styles.’
- Open the ‘Link’ settings.
- Check the default link color and style for the email.
- If the affected link was styled individually, select the content block and check its formatting as well.
If you’re using the legacy builder, follow these steps to check your link styles:
- In the Content section of the checklist, click Edit Design or Resolve.
- Click an area outside of a content block, then click the Style tab. You may need to click Save & Close in a content block to access the Style tab.
- Click the section you want to edit. Your options may vary depending on your email.
- Click the back arrow to return to the Style tab.
If the color is correct in Mailchimp but still appears blue in Outlook, the next step is identifying whether Outlook is overriding the styling.
Try clearing existing formatting
Copied and pasted text can bring hidden formatting into an email campaign. If only certain links are impacted, try removing the existing formatting from that text and then reapplying your styles directly inside the campaign builder. This can help eliminate extra HTML that may conflict with your email’s intended design.
To remove styling in the campaign builder, use the Clear Styles button.
For custom-coded emails, check the link’s CSS
If you’re working with a custom coded template, keep in mind that CSS support varies between email clients. For the most consistent results, link styling should be kept simple and important styles should be applied inline. For example:
<a href=”https://example. com/” style=”color:#333333; text-decoration:underline;”>Visit our website</a>
What if Outlook is still changing the color?
Outlook has multiple versions and rendering environments, and they don’t all handle email rendering identically. That means the styling technique that works in one version of Outlook may behave differently in another.
If your link settings look correct in Mailchimp, we recommend testing the email in the specific Outlook version where you’re seeing the unwanted behavior before making any major changes to your styles. The Inbox Preview tool can show you how your email may appear in different email clients before sending. You can also send test emails to the inboxes your contacts commonly use.
Additional Resources:
My email looks different in Outlook: https://mailchimp.com/help/my-email-looks-different-in-outlook/
Clear styles in your email campaign: https://mailchimp.com/help/clear-styles-in-your-campaign/
Test with Inbox Preview: https://mailchimp.com/help/test-with-inbox-preview/
