Sometimes, I need to change the color of <hr> elements in an email.The only achieveable way is by using CSS. But not every email client supports CSS. Most clients delete separated stylesheets. And some even delete stylesheets altogether!With a lot of trial, I came up with the following:<font color=red><hr align=left style=border:0px;border-top:1px solid red;height:1px;color:red;background:red;margin:0px;/></font>It draws a 1-2 pixels high horizontal line, using the specified color.Some HTML engines and browsers use background-color, others border-color, others simply color and others need the <font> tag for coloring.And yes, using <font> actually changes the color on some browsers and engines.Is there any other way to write this, but still keep it as compatible as possible with as many email clients as possible?
Colored  in emails
html;css;email;portability
Email formatting is very archaicLike, stone-age archaic. Like, HTML 4 but with most of the cool things (like <style> blocks and separate CSS sheets) not widely supported. There is some good information on Stack Overflow, I will link a few posts:Can I put a <style></style> tag within the body of a HTML file?Applying HTML formatting in email's bodyI would also strongly recommend Using CSS in HTML Emails: The Real Story from CSS-tricks.com and very importantly, Design for the lowest common denominator first.Here are a few observations that you can use to improve a bit:Get rid of <font> that has long been deprecated and some email providers don't support it. Instead, use inline CSS with <div> (generic), <span> (inline), <p> (paragraphs), and <h1> - <h6> (headers), and take advantage of the style= property that can be used on practically all HTML elements.Write your text first, to make sure it looks good and makes sense in text-only form, as some users disable HTML altogether, and you don't make your email to look like crap to them. Focus on content first, add formatting afterwards. Make yourself some templates with your best practices.Be creative! Use images! Use tables! Even with archaic HTML, there is still quite a bit you can do to make your emails look good. For instance, you could make a fancy <hr> by using an image instead of just a red-colored line! Don't forget that most CSS styles you would use in a CSS block, you can also use inline with <hr style=>.   <p style=font-family:Tahoma, Arial, sans-serif; font-size: 1em;>  Lorem ipsum dolor sit amet, consectetur <span style=font-weight:bold; font-style:italic;>adipiscing elit</span>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><div color=red>  <hr align=left style=border:0px; border-top:1px solid red; height:1px; color:red; background:red; margin:0px;/></div><h1 style=font-family: monospace; font-size: 1.3em;>  Sed ut perspiciatis</h1>