1

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

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
Mitthun
  • 75
  • 1
  • 8

4 Answers4

1

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.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
0

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

AtanuCSE
  • 8,832
  • 14
  • 74
  • 112
  • But where should I put my style ? I tried in main stylesheet , but It didn't work – Mitthun Feb 14 '14 at 18:57
  • You can put your css in style tag as I showed or you can put it in another css file and link it to your page. Suppose you have **style.css** file. where you wrote all your css. You can add that file in your page using `` Ofcourse it has to be inside the `` tags @Mitthun – AtanuCSE Feb 14 '14 at 19:01
  • 1
    You DO need to inline it afterwards though for html email. Gmail for example only supports inlined CSS. Here are some [CSS Inlining tools](http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057). – John Feb 14 '14 at 19:32
0

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>
JohnnyJS
  • 1,320
  • 10
  • 21
0

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.

Jazper Adèr
  • 77
  • 6