Applying Global CSS to Notifications

Notifications, probably our favorite thing in ServiceNow to configure, right?

When it comes to applying styles into notifications, the notification content editor can apply font sizes and text colors, but the majority of the styles that it applies are either in-line CSS, or use HTML tables, which are amazing as we all know.

Sometimes it's easier to develop the "shell" of your notification from an existing HTML formatted email or website, with it's accompanying styles.
Sometimes you want to apply a global style to all notifications and be able to update an maintain it with less effort. (other than updating every. single. notification.)

Luckily, with mail scripts, we can include arbitrary HTML or scripts into our email body, with a simple ${mail_script:email.style_script}, which we would add at the very top of our Notification or Template record.

This line will dynamically call a Mail Script that you define separately, something along the lines of:

(function runMailScript(current, template, email, email_action, event) {
    
    var stylesheet = new GlideRecord('content_css');
    stylesheet.get('name', 'email.style_css' );
    template.print('<div style="display: none;"><style>' + stylesheet.style + '</style></div>');
    
})(current, template, email, email_action, event);

This allows us to dynamically include a Stylesheet that is defined in the content_css table, with the Name field matching email.style_css. That record could contain any CSS you like. For example to apply a global font style:

body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 14px;
}