Use Velocity to generate HTML based email
css, java, velocity
Solution
CSS classes are ignored by email clients. If you are using standalone clients like Outlook Express, `div`s will also not be recognized (dont depend on `float:left`).
I suggest you to change your HTML page like -
- Drop everything outside the `<body>...</body>`
- Use `<table>` instead of `<div>`
- Dont use `<style>` tags to define style-classes, or .css file to load styles. Instead use inline css like `style="...."` inside the `<td>` / `<table>` containers.
Hope this helps you in email template designing.
Problem
I try this tutorials http://www.java2s.com/Code/Java/Velocity/UseVelocitytogenerateHTMLbasedemail.htm but, when i add css, it look like not executed. ``` <HTML> <HEAD> <TITLE>Pet Store Sale!</TITLE> <style type="text/css"> body { margin: 0 0 0 0; padding: 0 0 0 0; text-align: center; background-color: #FFF; border-top: 3px solid #CCC; } #container { position: relative; width: 860px; height: 1600px; margin: 84 auto 0 auto; padding: 0 0 0 0; background-color: #FFF; } p { font-family: times, Times New Roman, times-roman, georgia, serif; color: #444; margin: 0 0 0 0; padding: 0 0 0 0; text-align: center; } .woodtwo { font-size: 22px; line-height: 46px; letter-spacing: -1px; } .eyebrow { font-size: 19px; line-height: 29px; } .caps { font-size: 14px; line-height: 20px; text-transform: uppercase; } .copyone { font-size: 16px; line-height: 20px; } #line { border-bottom: 1px solid #CCC; width: 748px; margin: 10 0 20 56; } #break { height: 30px; } a:link { color: #B95E27; text-decoration: none; } a:visited { color: #B95E27; text-decoration: none; } a:active { color: #1A69A1; text-decoration: none; } a:hover { color: #888; text-decoration: none;} .grey { color: #888; } .smallcaps { font-size: 88%; } </style> </HEAD> <BODY> <div id="container"> <p class="caps"><a href="">From Pet Store Sale</a></p> <div id="line"></div> <p class="eyebrow"> <span class="grey">*</span>T<span class="smallcaps">HANK YOU FOR JOINING </span>P<span class="smallcaps">ET</span> S<span class="smallcaps">TORE</span> S<span class="smallcaps">ALE</span> A<span class="smallcaps">PPLICATION</span><span class="grey">*</span> </p> <p class="copyone"> <i>You received this email because your registration process in Pet Store Sale is successful.<br/> To Confirm your registration, please visit this link <a href ="$link">Confirmation Link</a>.<br/> Your username : $username<br/> Password : $password<br/> If you have any questions about Application, please send an email to <a href="mailto:admin@store.com">admin@store.com</a></i> <br><br><b>THANK YOU</b> </p> <div id="break"></div> <p class="woodtwo"> <a href="">GETTING STARTED</a> <div id="line"></div> <div id="line"></div> </div> </BODY> </HTML> ``` i've also tried ``` <link rel="stylesheet" href="./style/css/emailFormat.css" type="text/css" media="screen" /> ``` but it not work too. how the right way to add css on to this page. Thank you