How to add CSS to HTML Email using CI email libary

Code:
--b1_38996d61ccb9fd52e37b16c1fce774dc

Content-Type: text/plain; charset=us-ascii



![][1]



# This is a message for testing purpose



Greetings from the team of [Starter 4][2].



 [1]: cid:apple-touch-icon-precomposed.png@538cbbe011f14

 [2]: http://iridadesign.com/starter-public-edition-4/www/





--b1_38996d61ccb9fd52e37b16c1fce774dc

Content-Type: multipart/related;

 boundary="b2_38996d61ccb9fd52e37b16c1fce774dc"



--b2_38996d61ccb9fd52e37b16c1fce774dc

Content-Type: text/html; charset=us-ascii



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html &gt;

&lt;head&gt;

    &lt;meta http-equiv="Content-Type" c charset=utf-8" /&gt;

    &lt;meta name="viewport" c initial-scale=1.0"/&gt;

    &lt;title&gt;[Starter 4] Test Message&lt;/title&gt;



    &lt;style type="text/css"&gt;



        /* See http://htmlemailboilerplate.com/ */



        /* Based on The MailChimp Reset INLINE: Yes. */  

        /* Client-specific Styles */

        #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */

        body {

            width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:40px;

            font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px;

        } 

        /* End reset */



        /* Some sensible defaults for images

        Bring inline: Yes. */

        img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 

        a img {border:none;} 



        /* Yahoo paragraph fix

        Bring inline: Yes. */

        p {margin: 1em 0;}



        /* Hotmail header color reset

        Bring inline: Yes. */

        h1, h2, h3, h4, h5, h6 {color: black !important;}



        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}



        h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {

        color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */

        }



        h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {

        color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */

        }



        /* Outlook 07, 10 Padding issue fix

        Bring inline: No.*/

        table td {border-collapse: collapse;}



        /* Remove spacing around Outlook 07, 10 tables

        Bring inline: Yes */

        table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }



        /* Styling your links has become much simpler with the new Yahoo.  In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline.  Your link colors will be uniform across clients when brought inline.

        Bring inline: Yes. */

        a {color: blue;}



    &lt;/style&gt;



&lt;/head&gt;



&lt;body&gt;





    <p><img src="cid:apple-touch-icon-precomposed.png@538cbbe011f14" /></p>

    <h1>This is a message for testing purpose</h1>

    <p>Greetings from the team of <a href="http://iridadesign.com/starter-public-edition-4/www/">Starter 4</a>.</p>





&lt;/body&gt;

&lt;/html&gt;





--b2_38996d61ccb9fd52e37b16c1fce774dc

Content-Type: image/png; name="apple-touch-icon-precomposed.png"

Content-Transfer-Encoding: base64

Content-ID: <apple-touch-icon-precomposed.png@538cbbe011f14>

Content-Disposition: inline; filename=apple-touch-icon-precomposed.png



iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAMAAAAvHNATAAAAMFBMVEXriyPghiO7ciOZYCJsSCKD

dEZGZ3A8VlwwSVEpMzYuPkMlKSpLNyEyKiEhISEWGyDowOD9AAAEVUlEQVR4Ae2ZYa7cIAyEB4iy

CQR8/9u2Gz1ZRa23rDOR8oM5wffyecfAQ3toJtgEm2APygSbYBNsgk2wCTbBJlgpTwST5SjrVh4I

FpO81vVVngZWQ2x5/Z3X/igwWYCjrauiPQYsBiTZ1h+0/BQwqeF36r5q8kPAFoSARV6rZn+GyhhC

QJRt1WxPAJMjnKll1bzIYH6TfJcElREnWGw795OBYPLMu8o0DwBLOLG0ymiNAYLJM2yXYJj8e/wL

HcxhUl1mZpWBY5JfZbhmUrnoVQaSyXMt/Tn+QgZzmNQcQqwyXF1HncvMqzKwTPrXEh+shj44iFWG

KyaDhl9lYJjUNF6VgWNSx39jVRk4v0l1ubNcgmJSU9uLVGVgmDRcZjqYw6SuJcf4k8F0HXWhVRm8

XGrSrrJLLsExqYmtcVyCc7DQ4CBVGS4f9m+qMnBN8qoMPJNaZfumKTQwGYtl8nQ5mK/AlpiGEoOd

NJivwGrCWIIdDCUen/89AOP0d3eSSCvblsvw8EuNuJsK4ZDW9u2d/MWvMt1Mhlillbz9ZC+jYHKE

W9GWJj+fy0ZTML9Ov0YTzS5YactNZEiqsc9ug/l1ejX2GQNrUhP4U//WmP/NVQbAtNJwt0ZN/maJ

yxHB1dgsjft3pwvRSrtXYzbr4n6dSE1asT/XOBi50hYxNRbvQTHhVo3+E6y/0rwaFexWnRjT6ADT

u4f/KGFr9IO5darGZmu8BqYbiqsxl8YA00pjadwd90rWhkISsTSW5gBjbajD1ki7iTt+nU6N94OF

6tboAIvjYFikrKtHowOsfjf657uPodEBRlsAreX1Hbu8aGDpK7DT5ZmX/bk4KiMcLhVNudhgciB8

k3i6VDTVSAVzmAw4pKzel2LcZVJdara7wOT4eof3Lt1g/NPiIbvtkgcWv+XC0rnMN4FVx7Fa2uZ0

iVtMamrnsvjBfGWBz4vc5RLXywIxWWhIbpe4XPtInw7dVfKqWW8BS7DvQVITyC7hN6n3oD036e5Q

Zvm/hA4mh/G55DzXF0tn7Fy+ChHMLgvEQ58ud71DkRY5/Kd9pD9foHNpqpOxyOGtfYSfz6Up/3wW

8i5yOE0i1e7BXnWyFjmcZbG0c+o1qvMI+LTINzJYjTCmvs/+V6UhNlf5w1H73dT3yfosZLksXLAE

Y+r7lP5ZSF06yh/jtW9NvSZ3z0IXD2UYM2lMvXn5V53uQxnGy0KnfuTlUivNXuQMsAhz6u3Lf4J9

KCOB1f9NfS4fX7o9ixzDJpHq+OdSne5FjuGysKe+fPqTvIscQ7X/cer//9Ide5cEMK19e+rLyD8u

HC4xYvLD1I9MqOHyusrRqbd1Goeyy8PfmlUSQ5GWjEV+Eczg2tt4autfV1hgbc+ez9Un2y4dYJqS

HZ/LQitEMEXTkriAlnlgHVpu/mzqkgamaKrRj8YD05S9tIsp27rzwSgpTwXTTLAJNsEm2ASbYBNs

gk2wCTbBbs4vAqz6xMjzVoYAAAAASUVORK5CYII=





--b2_38996d61ccb9fd52e37b16c1fce774dc--





--b1_38996d61ccb9fd52e37b16c1fce774dc--