CSS Inlining
Some email clients do not properly support stylesheets, so for increased compatibility and flexibility, Adestra includes the ability to "inline" particular stylesheets into style attributes in HTML. This improves compatibility and consistency across a number of email clients.
On this page:
Invoking the CSS Inliner
To cause a stylesheet to be inlined, simply include an amf:inline attribute in the stylesheet's style tag, for example:
Copy
<style type="text/css" amf:inline>
...
</style>- Stylesheets can be included anywhere in the header or body.
- Stylesheets will not be removed once inlined, for compatibility reasons.
- Inlined style rules will be added before any existing rules in the style attribute, so any existing style rules in style attributes on HTML elements will be preserved.
- Selectors which contain @media, @import or certain psuedo-classes (eg :hover) can't be reliably or usefully inlined and will be ignored. The stylesheet will be left intact so these rules will still work in email clients that support the stylesheet.
Example
Before inlining:
Copy
<!DOCTYPE html>
<html>
<head>
<style type="text/css" amf:inline>
h1 {
text-align: center;
color: blue;
font-family: "Verdana";
}
h2 {
color: green;
font-family: "Verdana";
}
p {
font-family: "Verdana";
font-size: 20px;
}
</style>
</head>
<body>
<h1>Newsletter Header</h1>
<h2>Newsletter main subject</h2>
<p>A paragraph of newsletter goodness</p>
</body>
</html>After inlining:
Copy
<!DOCTYPE html>
<html>
<head>
<style amf:inline type="text/css">
h1 {
text-align: center;
color: blue;
font-family: "Verdana";
}
h2 {
color: green;
font-family: "Verdana";
}
p {
font-family: "Verdana";
font-size: 20px;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: blue; font-family: "Verdana";">Newsletter Header</h1>
<h2 style="color: green; font-family: "Verdana";">Newsletter main subject</h2>
<p style="font-family: "Verdana"; font-size: 20px;">A paragraph of newsletter goodness</p>
</body>
</html>