Magento 1.9 - style email template

Question

I am trying to apply my custom css in email template. I already done these things.

1. Add inline css to my html
   <table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
   
2. include inline css file and add path of these css in admin->system->configuration->design
   {{inlinecss file="email-inline.css"}} {{inlinecss file="email-non-inline.css"}}
   I checked that they are including or not ny editing body background color to black

but no success yet. I am editing newsletter subscription email template.

I got success in adding style tag by adding {{var non_inline_styles}} to my html file .but not able to write my css into style tag. how can I write my own css in this tag.

So can anyone tell me how can I style my email template I tried this too
http://devdocs.magento.com/guides/m1x/ce19-ee114/RWD_responsive_emails.html#email-css

here is my template file code

    <!--@subject Newsletter subscription success @-->
    {{template config_path="design/email/header"}}
    {{var non_inline_styles}}
    {{inlinecss file="email-inline.css"}}
    {{inlinecss file="email-non-inline.css"}}
<div class="newsletter-confirmation">
<table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
    <!--Header -->
    <tr>
        <td style="padding:18px; margin:0; height:40px\9;">

            <p style="float:right; margin:0; padding:0; width:200px;">
                <img src="{{skin url='images/hot_line.jpg'}}" style="text-align:right; vertical-align:bottom; float:right; clear:both; margin-top:21px;">
            </p>
        </td>
    </tr>
    <tr><td style="height:1px; border-bottom:1px solid #000; width:100%; margin:0; padding:0; line-height:0;">&nbsp;</td></tr>
    <!-- / Header -->
    <!--Mid -->
    <tr>
        <td>
            <table align="center" style="width:564px; background:#FFF; padding:18px; margin-top:0; border-collapse:collapse; margin-top:10px;">
                <tr>
                    <td>

                        <p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:0;">Greetings from ...!<br>

                            You have been successfully subscribed to the newsletter.</p>
                    </td>
                </tr>

                <tr><td height="18"></td></tr>


                <tr>
                    <td>
                        <table align="center" style="width:564px; margin:0; padding:0; border-collapse:collapse;">
                            <tr>
                                <td><a href="#" target="_blank" style="margin:0; padding:0 10px 0 0; border:none; outline:none;">
                                        <img src="{{skin url='images/free-shipping.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0;"></a>
                                </td>
                                <td rowspan="2"><a href="#" target="_blank" style="margin:0; padding:0; border:none; outline:none;">
                                        <img src="{{skin url='images/return-exchange.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0 0 0 10px;"></a>
                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:12px 0;">Thank you<br><strong>Team ...</strong></p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--Mid -->
    <!--Footer -->
    <tr>
        <td style="width:582px; padding-left:18px; background:#efefef;" >
            <p style="color:#666666; font:11px/15px Arial, Helvetica, sans-serif; padding:0; margin:8px 0;">
                <a href="http://www.....com/" target="_blank" style="margin:0; padding:0; color:#666666; text-decoration:none;">....com</a> All Rights Reserved.
            </p>
        </td>
    </tr>
    <!-- / Footer -->
</table>
</div>
{{template config_path="design/email/footer"}}

Answer 1

First you need to understand how inline-css and non-inline-css work in magento.

For adding any inline-css using a separate file you define it using

{{inlinecss file="email-inline.css"}}

It will inject css defined in your file within style attribute of each tag with provided class.

So if you need to style button in your email, you need to define a class in email-inline.css like following:

.btn {

}

then you need to apply this class to an element in your template like following:

<input type="button" class="btn" />

Magento will automatically inject the css in style attribute before sending an email.

Reference