CODEWITHSUNDEEP
htmlcsshtml-email
Mitthun
Mitthun

Reputation: 75

How can I style HTML email

Here is the sample of my HTML email 

<div style="width:650px;">
    <div class="begining">  
        <p>
            Dear <span>' . $name . '</span><br/>Thank you for your booking 
        </p>
    </div>

    <table border="1" style="width:80% ;margin: 10px auto;">
        <tr>
            <td>Confirmation Number: </td>
            <td>' . $id . '</td>
        </tr>
        <tr>
            <td>Client’s Name & Contact No:</td>
            <td>' . $name .' and ' . $mobile . '</td>
        </tr>
    </table>

    <div class="begining">  
        <p>
            Should you require an early delivery, 
            please call for your request as soon as possible.<br/>
            Sincerely,<br/>

            Johns<br/>

        </p>
    </div>
</div>

If I wish I could style each element separately , like I did for main div and the table . But I have a lot of table element like td and tr . And I wish to insert more div . Adding same styling in each div and other element will be tiresome . So I want to add a style sheet or put all the style somewhere . I don't know where to . I tried to add style for each element in my style sheet , but it didn't work , So what can I do now ? Thanks in advance

Upvotes: 1

Views: 227

Answers (4)

Jazper Ad&#232;r
Jazper Ad&#232;r

Reputation: 77

Linked CSS doesn't work. GMail, Outlook.com and AOL strip everything in the head. Links to external css-files obviously don't work. Skip the div's not all clients understand them. Use tables.

It's best practice to inline your CSS. Don't shorthand.

You CAN use CSS. But be sure to test your mail regulary with Email on Acid and Litmus.

Upvotes: 0

John
John

Reputation: 12193

You need to inline your code. Even though it is redundant, you can simply copy and paste the inline CSS into each element. If you need to change many in bulk, use the search&replace in your text editor. I also use snippets to prevent me from having to type it in manually. Personally I find this easier and quicker than working in the style tag when doing emails as it prevents any back and forth and helps debugging.

Alternatively you can work traditionally in the style tag (in the header, not a style sheet) and use an inliner tool to convert it to inline before sending.

I'd strongly suggest you check out this thread. It has a lot of information on best practices in html email and should help speed up your learning curve.

Upvotes: 1

AtanuCSE
AtanuCSE

Reputation: 8940

You don't need to use inline css only. You can style your div or any element with class id etc.

<div class="same"></div>

Another Div

<div class="same"></div>

Inside head tag

<head>
<style>
.same
{
    /*some styling*/
}

</style>
</head>

This way you can provide syling to multiple div, tr, th, td or any using class

This link will give you more useful hint W3school css id class

Upvotes: 0

JohnnyJS
JohnnyJS

Reputation: 1472

before the 

<div style="width:650px;">

simply put a <style></style> element. and inside you can write something like:

<style>
.begining {
color: red;
background: #999;
}
</style>

Upvotes: 0

Related Questions