How to Put a <Style>...</Style> Tag Within the Body of a HTML File to Send in Email

Can I put a style ... /style tag within the body of a HTML file to send in email?

The short answer is no. Gmail strips the tag and it's content.

Hotmail, Yahoo! Mail and Windows Live Mail does not strip style-tags in the body-element.

But take a look at "The Ultimate Guide to CSS" for HTML email over at Campaign Monitor.

Is safe to put html style tag into body tags coding html emails?

It seems client dependent. Check out a similar answer here.

Some clients will support the use of styling in the body, but generally not in the head. Since there is really no way to incorporate css, it makes sense that this would be the case.

Is it correct to use the style tag outside of the head element?

style is supposed to be included only on the head of the document.

Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.

HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.

According to the W3 specs, <link> tags are only supposed to go in the <head> section:

References

For HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

For HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element

Validation Issues

If you put a tag within the body of the HTML document, it will not validate using validate.w3.org

Gmail - HTML classes and style tags are removed inside table

There are different versions of Gmail, but yes it is common to see it strip embedded CSS. You must refactor your code to inline the styles. See HTML email in Gmail - CSS style attribute removed Why is Gmail blocking CSS in emails? or Styles not working in Gmail

Head styles in emails?

Best is for style to be written in the document and not linked. Linked resources are blocked by webmail clients like Outlook.com, Yahoo and Gmail

Use this guide for style support of email clients:
https://www.campaignmonitor.com/css/

How to create a style tag with Javascript?

Try adding the style element to the head rather than the body.

This was tested in IE (7-9), Firefox, Opera and Chrome:

var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

mailto link with HTML body

As you can see in RFC 6068, this is not possible at all:

The special <hfname> "body" indicates that the associated <hfvalue>
is the body of the message. The "body" field value is intended to
contain the content for the first text/plain body part of the
message. The "body" pseudo header field is primarily intended for
the generation of short text messages for automatic processing (such
as "subscribe" messages for mailing lists), not for general MIME
bodies.

Best practices for styling HTML emails

Campaign Monitor have an excellent support matrix detailing what's supported and what isn't among various mail clients.

You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters, etc.



Related Topics



Leave a reply



Submit