Search code examples
htmlcssnewsletteremail-templates

Confusion about css coding standards for Html Email newsletter

i am coding Email newsletters. i have seen some guidelines regarding Good email coding.. i want to ask about css code for Email newsletters for example its preffered to code inline css but for some free templates i found code like this 

       <style type="text/css">

       body { color:#000; background-color:#fff; font-family:Arial, Helvetica, sansserif; text-align:center; }
       h2 { color:#2255DB; font-size:16px; margin-top:15px; margin-bottom:0px; }        
       h2 a:link { text-decoration:none; }
      .footer { fontsize:11px; text-align:center; color:#2255DB; }// and son on 

       </style>

in body code for fotter is like 

    <p class="footer" style="color:#2255DB;"> footer...</footer>//again style  tag

and sometimes i found like this total inline styling .. 

    <span style="font-weight: bold; width: 525px;">
    Lorem ipsum dolo
    </span><br><br>// and son on  ,,

Both the above mentioned codes are working fine in Email clients i have also seen standards from Campaign monitor etc, so i am confused which style is better .. should we use style in as in above mentioned code and or total inline coding , Please if someone can clear me about this ..it would be great favor

EDIT : once coded is there any free service that can help to check if its valid code for mail clients ?

Solution

  • To make sure that the HTML newsletter looks as close as the designs I would definitely use inline styling.

    Unfortunately you have to be very specific with your styling, otherwise some software (Gmail for instance) will override your style declarations. It is a real pain sometimes, but it's worth doing it that way IMO.

    Same thing goes for HTML email signatures.

    So definitely go for the inline styling :)

    Oh, and one more thing. I know that it's 2012 and loads of designers/front-enders advice to use html tags (even html5 elements) in HTML emails and signatures, but I'd try to stick to the old-school way and use tables to make sure there is no unnecessary artefacts with the code.