How to modify the css for New Order Confirmation Template?

Question

   Magento 1.9.1

I am trying to make the Order Confirmation Email a bit shorter (we actually print each and every one of those and we have a few lines on page 3 which wastes a lot of paper). I modified the new_order template in System -> Configuration -> Sales Emails -> Order -> New Order Confirmation Template.

What I did was decrease the size of the font by using h5 and h6 tags there.

What happens now is - the text has decreased but there are many spaces between paragraphs (please see enclosed screenshots) so in the end - we still have a 3rd page when printing out and it's even gotten a bit longer. I understand one would have to edit the CSS to change this....Where can the CSS file be found and what modifications would you do to it exactly?

Here is the new_order file:

{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="email-heading">
                        <h3>Thank you for your order from {{var store.getFrontendName()}}.</h3>
                        <p><h5>Your order will go through the following steps. Unfortunately, we do not offer real time updates at the moment. </h5><br/>


<strong><h5>1. Pending.</h5> </strong><h5>Your order has been received by us, and will be charged and we will verify if it is a valid order. This step can take up to 24 hours. </h5><br/>
<strong><h5>2. Processing. </h5></strong><h5>Your order has been successfully charged and verified as a valid order. Your order will remain “processing” until delivery has occurred.</h5> <br/>
<strong><h5>3. Hold.</h5> </strong><h5>There is a problem with your order, and we have sent out a request for more information. Please contact the store. </h5><br/>
<strong><h5>4. Complete. </h5></strong><h5>Your order has been delivered. </h5><br/>
<strong><h5>5. Cancelled.</h5> </strong><h5>Your order has been Cancelled. </h5><br/>
<br/>

<h5>Please note the following. We need at least 2-4 hours to process an order and there are no Sunday deliveries. Your order summary is below.</h5></p>
                    </td>
                    <td class="store-info">
                        <h4>Order Questions?</h4>
                        <p>
                            {{depend store_phone}}
                            <b>Call Us:</b>
                            <a href="tel:{{var phone}}">{{var store_phone}}</a><br>
                            {{/depend}}
                            {{depend store_hours}}
                            <span class="no-link">{{var store_hours}}</span><br>
                            {{/depend}}
                            {{depend store_email}}
                            <b>Email:</b> <a href="mailto:{{var store_email}}">{{var store_email}}</a>
                            {{/depend}}
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="order-details">
            <h3>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
            <p>Placed on {{var order.getCreatedAtFormated('long')}}</p>
        </td>
    </tr>
    <tr class="order-information">
        <td>
            {{if order.getEmailCustomerNote()}}
            <table cellspacing="0" cellpadding="0" class="message-container">
                <tr>
                    <td>{{var order.getEmailCustomerNote()}}</td>
                </tr>
            </table>
            {{/if}}
            {{layout handle="sales_email_order_items" order=$order}}
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="address-details">
                        <h6>Bill to:</h6>
                        <p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>


<h6>Shipping Arrival Date::</h6>
                        <p><span class="no-link">{{var deliverydate_arrival_date}}</span></p>

<h6>Shipping Arrival Comment::</h6>
                        <p><span class="no-link">{{var deliverydate_comment}}</span></p>



                    </td>
                    {{depend order.getIsNotVirtual()}}
                    <td class="address-details">
                        <h6>Ship to:</h6>
                        <p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="method-info">
                        <h6>Shipping method:</h6>
                        <p>{{var order.shipping_description}}</p>
                    </td>
                    {{/depend}}
                    <td class="method-info">
                        <h6>Payment method:</h6>
                        {{var payment_html}}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

{{template config_path="design/email/footer"}}

Answer 1

There are two ways you can do this add the css inline. via html

<h6 style="padding:0px;margin:0px">Shipping Arrival Comment::</h6>

Or you can find css file in following location.

skin/frontend/YOURPACKAGE/YOURTHEME/css/email-inline.css