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
@Font-Face Not Working on Mobile
How to Change the Inner White Color of Font Awesome's Exclamation Triangle Icon
How to Calculate Required Hue-Rotate to Generate Specific Colour
Listitem Disc Displaying at Vertical Bottom
How to Change the Color of an Image on Hover
Vertically Center Text in Bootstrap Carousel
Placing a <Div> Within a <Canvas>
Making a Paragraph in HTML Contain a Text from a File
Chrome Could Play HTML5 Mp4 Video But HTML5Test Said Chrome Did Not Support Mp4 Video Codec
CSS Show Div Background Image on Top of Other Contained Elements
Ruby Slim - How to Define an Element's Class with a Rails Helper or Variable