Override System Link Color in Email Templates Using CSSIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Administrators and developers need to override the default system link color in email templates to match branding guidelines or improve email readability, but standard CSS modifications in the message body HTML are not being applied consistently across email clients. Symptoms<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Hyperlinks in email notifications display default blue color instead of custom colorsCSS color definitions in email template stylesheets are ignored by email clientsLink colors appear differently across various email clients (Outlook, Gmail, Apple Mail)Custom link colors work in preview but not in actual delivered emailsMailto links display unwanted colors that conflict with email background or designOutlook email client specifically ignores CSS color definitions for hyperlinksInline styles or external CSS fails to override system default link colors Facts<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Affected Component: Email Notifications, Email Templates, Notification Body HTMLEmail Clients Affected: Microsoft Outlook (all versions), Gmail, Apple Mail, other email clientsCSS Properties: Link color styling, hyperlink appearanceCommon Use Cases: Branding requirements, accessibility compliance, design consistencyOutlook Behavior: Uses proprietary rendering engine (Microsoft Word) with limited CSS supportBest Practice: Always test email templates across multiple email clients before deployment Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } All Cause<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } The issue occurs due to several factors related to email client rendering: Email Client CSS Limitations: Most email clients have restricted CSS support compared to web browsers, and default link styling often takes precedence over custom stylesOutlook Rendering Engine: Microsoft Outlook uses the Microsoft Word rendering engine instead of a standard web browser engine, resulting in inconsistent CSS interpretation and limited support for standard CSS propertiesCSS Specificity Issues: Default email client link styles may have higher specificity than custom CSS defined in the email template, causing them to override custom stylesExternal CSS Not Supported: Many email clients strip out or ignore external stylesheets and <style> blocks, requiring inline CSS for reliable renderingSecurity Restrictions: Email clients implement security measures that filter or modify CSS to prevent malicious code, which can affect custom styling Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Method 1: Inline CSS (Recommended for Maximum Compatibility) Apply styles directly within the hyperlink tag using the style attribute. This method has the highest compatibility across email clients. Implementation: html <a href="https://example.com" style="color: #000000; text-decoration: none;">Link Text</a> For mailto links: html <a href="mailto:user@example.com" style="color: #ffffff; text-decoration: underline;">Contact Us</a> Advantages: Highest compatibility across all email clientsDirectly overrides most default stylesNo dependency on <style> block support Method 2: !important Rule for Enhanced Priority Use the !important CSS rule to force style priority over conflicting default styles. Implementation: html <style> a { color: #000000 !important; text-decoration: none !important; } </style> <a href="https://example.com">Link Text</a> For mailto links specifically: html <style> /* Force white color for mailto links */ a[href^="mailto:"] { color: #ffffff !important; text-decoration: underline !important; } /* Standard links in black */ a:not([href^="mailto:"]) { color: #000000 !important; } </style> Method 3: Outlook-Specific Conditional CSS Target Microsoft Outlook specifically using conditional comments to apply Outlook-compatible CSS. Implementation: html <style> /* Default CSS for all email clients */ a { color: #000000; text-decoration: none; } /* Specific styling for mailto links */ a[href^="mailto:"] { color: #ffffff !important; } </style> <!-- Outlook-specific CSS using conditional comments --> <!--[if mso]> <style type="text/css"> a { color: #000000 !important; text-decoration: none !important; } /* Force white for mailto links in Outlook */ a[href^="mailto:"] { color: #ffffff !important; } </style> <![endif]--> For mailto links specifically: html <style> /* Default link color for most clients */ a { color: #000000; text-decoration: none; } /* Force white for mailto links everywhere */ a[href^="mailto:"] { color: #ffffff !important; text-decoration: underline !important; } </style> <!-- Outlook-specific override --> <!--[if mso]> <style type="text/css"> /* Keep mailto links white in Outlook */ a[href^="mailto:"] { color: #ffffff !important; text-decoration: underline !important; } /* Make non-mailto links black in Outlook */ a:not([href^="mailto:"]) { color: #000000 !important; text-decoration: none !important; } </style> <![endif]--> Conditional Comment Versions: <!--[if mso]> - All Outlook versions<!--[if mso 15]> - Outlook 2013<!--[if mso 16]> - Outlook 2016/2019/365 Common Color Values: Black: #000000White: #ffffffBrand colors: Use your organization's hex codesLink blue (default): #0000EE Fallback Strategy: html <!-- Always provide fallback colors --> <a href="https://example.com" style="color: #000000; text-decoration: none; mso-line-height-rule: exactly;"> Link Text </a>