Adding CSS to Stationery Layout HTML

Document created by user.oxriBaJeN4 Employee on Sep 8, 2015Last modified by user.oxriBaJeN4 Employee on Jun 14, 2016
Version 8Show Document
  • View in full screen mode

Referencing external files and scripts represents a security risk for the email recipient. For this reason stationery and notifications HTML does not support active scripts (e.g. JavaScript, VBScript) or external Cascading Style Sheets (CSS). For example, a style applied to <p> elements in a separate style sheet or in the head of your HTML page might look like:

p { line-height: 1.5em; margin: 0px 0px 10px 0px; }

Such a style applies to all paragraphs in your page. However some email clients (e.g. Gmail) strip out such styles, meaning the paragraphs are styled according to whatever default the email client uses, or by the webmail client’s own style sheet.

 

To overcome this limitation, you can add a style in the HTML <head> section that is applied across the layout. In the following example the background color, heading 1, and paragraph tags are given color values:

<html>

<head>

<style> body {background-color:lightgrey;} h1{color:blue;} p {color:green;} </style>

</head>

<body>

<h1>Header in Blue</h1>

<mc type="body">

<p>Some text in green.</p>

<p>Some text in green.</p>

</body>

</html>

You can also apply styles inline for individual elements in your HTML. This allows you to have multiple different formats that override the default styling. In the following example, style tags are defined in the <head> section. Instead the color styling is applied in the individual heading 1 and paragraph tags:

<html>

<head>

</head>

<body>

<h1 style="color:blue">Header in Blue</h1>

<mc type="body">

<p style="color:green">Some text in green.</p>

<p style="color:red">Some text in red.</p>

</body>

</html>

You can also use a mixture of styling in the <head> section and individual elements in your HTML. This allows you to specify a default for styling elements, but override this as the need arises. In the following example the background color, heading 1, and paragraph tags are given color values in the <head> section, but the second <p> tag has an override to change the text color.

<html>

<head>

<style> body {background-color:lightgrey;} h1{color:blue;} p {color:green;} </style>

</head>

<body>

<h1>Header in Blue</h1>

<mc type="body">

<p>Some text in green.</p>

<p style="color:red">Some text in red.</p>

</body>

</html>

We suggest you don’t use inline styles until you’ve finished the coding. Develop it all using a style tag in your <head> tag, and only once you’ve made all the changes apply them inline.

1 person found this helpful

Attachments

    Outcomes