css - Html not displaying correctly in email -

css - Html not displaying correctly in email -

html:

<div id="container"> <div id="social-links"> <img src="http://www.collegify.com/emailer/roads/delhi/images/promotional_03.jpg" alt=""> www.twitter.com/roadsprep <br /> <img src="http://www.collegify.com/emailer/roads/delhi/images/promotional_09.jpg" alt=""> www.facebook.com/roadsprep </div> <div id="website-link">www.roadsprep.com</div> <div id="now-at-gurgaon"> @ <br /> gurgaon </div> <div id="gray-box"> specialize in <br /> sat, gre, gmat, deed <br /> ielts , toefl coaching! </div> <div id="pointers"> <ul> <li>over 6 years of test prep experience!</li> <li>over 300 students 2100 + scores</li> <li>on average, improvement of 400 point improvement in scores</li> </ul> </div> <div id="contact-info"> <strong>roads academy private limited</strong> <br /> office no. 4001, basement, dlf phase iv, near, galleria market, gurgaon - 122 009, haryana <br /> <strong>phone:</strong> +91 85100 66662 <strong>email:</strong> support@roadsprep.com </div> </div>

css:

class="lang-css prettyprint-override">* { font-family: 'open sans condensed', sans-serif; } #container { background-image: url(http://www.collegify.com/emailer/roads/delhi/images/promotional-flyer-for-delhi-front-1.jpg); background-repeat: no-repeat; width: 600px; height: 910px; margin: 0 auto; padding-top: 31px; } #social-links { margin: 0 0 0 32px; float: left; width: 200px; height: 57px; font-size: 13px; font-weight: bold; } #website-link { margin: 0 21px 0 0; float: right; width: 200px; text-align: right; font-size: 22px; font-weight: bold; } #now-at-gurgaon { margin: 230px 0 0 128px; color: #454b4f; font-size: 25px; font-weight: bold; text-align: center; width: 181px; line-height: 22px; font-family: arial, helvetica, sans-serif; } #gray-box { background-color: #454a4e; width: 280px; height: 80px; border-top: solid 1px #1b1d21; margin-top: 315px; padding-left: 40px; font-size: 22px; font-weight: bold; line-height: 25px; color: #fbc911; } #pointers { width: 280px; padding: 0 0 0 20px; font-size: 16px; font-weight: bold; line-height: 20px; color: #454a4e; } #contact-info { border-top: solid 1px #2f3337; width: 537px; margin: 10px auto 0 auto; text-align: center; padding-top: 10px; line-height: 20px; font-size: 17px; }

code in head web font:

<link href='http://fonts.googleapis.com/css?family=open+sans+condensed:300,700' rel='stylesheet' type='text/css'>

this displays in browser, not working in email. know cannot paste code in email, , need preview in browser, re-create straight there, , paste in email body, not displaying correctly. using gmail.

emails tend strip header content, unlikely able add together external link new font.

as rule, maintain html in emails simple possible ability render html limited (especially outlook). remember (probably) sending variety of email clients - different.

this should help : https://www.campaignmonitor.com/css/

html css html-email