Geek asks and answers

Use Velocity to Create HTML Email

I try this tutorial http://www.java2s.com/Code/Java/Velocity/UseVelocitytogenerateHTMLbasedemail.htm but when I add css it looks like it is 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 also tried

<link rel="stylesheet" href="./style/css/emailFormat.css" type="text/css"  media="screen" />

but it doesn’t work either. how to add css to this page correctly. Thanks you

+3
source share
1 answer

CSS classes are ignored by email clients. If you use offline clients, such as Outlook Express, it is divalso not recognized (independent of float:left).

I suggest you change your HTML page, for example -

  • Drop everything outside <body>...</body>
  • Use <table>instead<div>
  • <style> .css . css, style="...." <td>/<table>.

, .

+14

More articles:


All Articles