1<!DOCTYPE html> 2<html class="" lang="en"> 3 <head> 4 5 <!-- Google Tag Manager --> 6
6<script>
vendor: 455 bytes, lines 6-16
6 7 (function (w, d, s, l, i) { 8 w[l] = w[l] || []; 9 w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); 10 var f = d.getElementsByTagName(s)[0], 11 j = d.createElement(s), 12 dl = l != "dataLayer" ? "&l=" + l : ""; 13 j.async = true; 14 j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; 15 f.parentNode.insertBefore(j, f); 16 })(window, document, "script", "dataLayer", "
16GTM-5WBHBQM
vendor: 8 bytes, lines 16-17
16"); 17
17</script>
17 18 <!-- End Google Tag Manager --> 19 20 <meta charset="utf-8" /> 21 <title>Responsive CSS Inliner for Email Templates</title> 22 <meta name="description" content="Use our free CSS inliner tool to inline your styles in HTML for your email templates and to ensure they render properly in your customers email clients." /> 23 <meta name="viewport" content="width=device-width" /> 24 <link rel="stylesheet" href="https://htmlemail.io/css/main.css" /> 25 <link rel="icon" type="image/x-icon" href="/favicon.png" /> 26 <link rel="canonical" href="https://htmlemail.io/inline/" /> 27 <link 28 rel="alternate" 29 type="application/rss+xml" 30 title="RSS Feed for HTML Email" 31 href="https://htmlemail.io/feed.xml" 32 /> 33 34 <!-- Twitter Card data --> 35 <meta name="twitter:card" content="summary_large_image" /> 36 <meta name="twitter:site" content="@htmlemailio" /> 37 <meta name="twitter:title" content="Responsive CSS Inliner for Email Templates" /> 38 <meta name="twitter:description" content="Use our free CSS inliner tool to inline your styles in HTML for your email templates and to ensure they render properly in your customers email clients." /> 39 <meta name="twitter:creator" content="@leemunroe" /> 40 41 <meta name="twitter:image" content="https://htmlemail.io/img/twitter.png" /> 42 <meta name="twitter:image:alt" content="Responsive CSS Inliner for Email Templates" /> 43 44 45 <!-- Open Graph data --> 46 <meta property="og:title" content="Responsive CSS Inliner for Email Templates" /> 47 <meta property="og:type" content="article" /> 48 <meta property="og:url" content="https://htmlemail.io/inline/" /> 49 <meta property="og:site_name" content="HTML Email" /> 50 <meta property="og:description" content="Use our free CSS inliner tool to inline your styles in HTML for your email templates and to ensure they render properly in your customers email clients." /> 51 52 53 <link rel="manifest" href="/manifest.json" /> 54 55 <!-- Push Notifications --> 56 <!--
56<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
56 57
57<script> 58 59 60 var OneSignalID = // Prod 61 62 63 window.OneSignal = window.OneSignal || []; 64 OneSignal.push(function() { 65 OneSignal.init({ 66 appId: "24caa18a-70c8-4f57-b23d-23069a5c6972", 67 }); 68 }); 69 </script>
69 --> 70 </head> 71 <body> 72 73 74 <!-- Google Tag Manager (noscript) -->
vendor: 87 bytes, lines 74-77
74 75 <noscript 76 ><iframe 77 src="https://www.googletagmanager.com/ns.html?id=
77GTM-5WBHBQM
vendor: 126 bytes, lines 77-83
77" 78 height="0" 79 width="0" 80 style="display: none; visibility: hidden" 81 ></iframe 82 ></noscript> 83
83<!-- End Google Tag Manager (noscript) --> 84 </body> 85</html> 86 87 88<header class="header cd-morph-dropdown"> 89 <div class="container"> 90 <div class="group flex-valign"> 91 <div class="span3"> 92 <div class="logo"> 93 <a href="/"><svg height=32 width=213 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213 32" fill="none"> 94 <ellipse cx="16" cy="16" rx="16" ry="16" fill="#EC0866"/> 95 <path fill-rule="evenodd" clip-rule="evenodd" d="M27.1901 23.9762L17.7368 17.6473L15.8977 18.8733L14.1608 17.6473L4.80247 23.9661C3.16906 21.6997 2.20679 18.9174 2.20679 15.9103C2.20679 12.9751 3.12367 10.2539 4.68666 8.01773L15.8977 16.2169L27.3007 8C28.8713 10.2395 29.793 12.9673 29.793 15.9103C29.793 18.9218 28.8279 21.7079 27.1901 23.9762V23.9762Z" fill="white"/> 96 <path fill-rule="evenodd" clip-rule="evenodd" d="M52.6839 7.22583V14.42H45.7073V7.22583H40.9463V25.4173H45.7073V18.0856H52.6839V25.4173H57.4455V7.22583H52.6839Z" fill="#E92D79"/> 97 <path fill-rule="evenodd" clip-rule="evenodd" d="M60.125 7.22583V10.8919H66.0856V25.4173H70.832V10.8919H76.7652V7.22583H60.125Z" fill="#E92D79"/> 98 <path fill-rule="evenodd" clip-rule="evenodd" d="M94.2317 7.22583L91.3798 16.5146L90.3283 20.3456H90.2727L89.2476 16.4872L86.3682 7.22583H79.5854V25.4173H83.8212V17.0662L83.6831 11.4709H83.7381L88.2512 25.4173H92.1001L96.6132 11.4709H96.6687L96.5295 17.0662V25.4173H100.738V7.22583H94.2317Z" fill="#E92D79"/> 99 <path fill-rule="evenodd" clip-rule="evenodd" d="M104.828 7.22583V25.4173H118.789V21.7517H109.601V7.22583H104.828Z" fill="#E92D79"/> 100 <path fill-rule="evenodd" clip-rule="evenodd" d="M128.801 7.22583V25.4173H143.467V21.7517H133.587V18.0308H141.157V14.5854H133.587V10.8919H143.105V7.22583H128.801Z" fill="#E92D79"/> 101 <path fill-rule="evenodd" clip-rule="evenodd" d="M160.934 7.22583L158.082 16.5146L157.03 20.3456H156.975L155.95 16.4872L153.071 7.22583H146.287V25.4173H150.524V17.0662L150.385 11.4709H150.44L154.953 25.4173H158.802L163.315 11.4709H163.37L163.232 17.0662V25.4173H167.44V7.22583H160.934Z" fill="#E92D79"/> 102 <path fill-rule="evenodd" clip-rule="evenodd" d="M169.556 25.4173L175.962 7.22583H181.65L188.029 25.4173H183.141L181.899 21.3108H175.603L174.333 25.4173H169.556ZM178.724 10.8647L177.978 13.7032L176.597 18.0858H180.905L179.58 13.7311L178.778 10.8647H178.724Z" fill="#E92D79"/> 103 <path fill-rule="evenodd" clip-rule="evenodd" d="M190.144 25.4173H194.939V7.22583H190.144V25.4173Z" fill="#E92D79"/> 104 <path fill-rule="evenodd" clip-rule="evenodd" d="M199.028 7.22583V25.4173H212.989V21.7517H203.802V7.22583H199.028Z" fill="#E92D79"/> 105</svg></a> 106 </div> 107 </div> 108 <div class="span9"> 109 <nav class="main-nav"> 110 <ul class="navbar navbar--header text-right"> 111 <li class="clone-hide"> 112 <a href="/inline">CSS Inliner</a> 113 </li> 114 <li class="clone-hide"> 115 <a href="/design-system">Design System</a> 116 </li> 117 <li class="clone-hide"> 118 <a href="/send">Send Test Email</a> 119 </li> 120 <li class="has-dropdown gallery" data-content="emailtemplates"> 121 <a href="/#buytemplates" class="btn btn-primary" 122 >Get Email Templates</a 123 > 124 </li> 125 </ul> 126 </nav> 127 </div> 128 </div> 129 </div> 130</header> 131 132 133<div class="container container--blog"> 134 135 <h1>Responsive CSS Inliner for Email Templates</h1> 136 137 138 <div class="container"> 139 <div class="group"> 140 <div class="span12 text-center"> 141 <a href="/#buytemplates" class="cta-highlight">Get 10 HTML email templates ready to copy & paste →</a> 142 </div> 143 </div> 144</div> 145 146<div class="container--inliner"> 147 <div class="group"> 148 <div class="span5"> 149 <div class="inliner__input form-field"> 150 <label for="input">Input: Source HTML/CSS</label> 151 <textarea id="input" class="inliner__input-editor" autofocus></textarea> 152 <div id="err"></div> 153 </div> 154 <div class="inliner__output form-field"> 155 <label for="output">Output: Inlined CSS</label> 156 <textarea id="output" readonly class="inliner__output-editor"></textarea> 157 <button class="btn btn-primary btn-sm js-download-output" onclick="return downloadInliner();">Download</button> 158 <button class="btn btn-primary btn-sm js-copy-output">Copy</button>
159 <a href="https://htmlemail.io/send" id="btn-send-test" class="btn btn-primary btn-sm" target="_blank">Send Test</a> 160 </div> 161 </div> 162 <div class="span7"> 163 <div class="text-center"> 164 <button class="btn btn-link btn-icon active js-btn-desktop" onclick="return switchPreview('desktop');"><svg class="desktop-svg"><use xlink:href="/img/symbol/svg/sprite.symbol.svg#src--device-desktop"></use></svg></button> 165 <button class="btn btn-link btn-icon js-btn-mobile" onclick="return switchPreview('mobile');"><svg class="mobile-svg"><use xlink:href="/img/symbol/svg/sprite.symbol.svg#src--device-mobile"></use></svg></button> 166 </div> 167 <div class="inliner__preview"> 168 <div class="inliner__preview-client"> 169 <img src="https://htmlemail.io/img/emailclient.png" alt="" class="inliner__preview-chrome"> 170 <iframe id="email-preview" class="inliner__preview-iframe" data-hj-allow-iframe=""></iframe> 171 </div> 172 </div> 173 </div> 174 </div> 175</div> 176 177<div class="social-sharing-container text-center"> 178 <!-- Sharingbutton Facebook --> 179 <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=https://htmlemail.io/inline/" target="_blank" aria-label="Share on Facebook"> 180 <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> 181 <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> 182 <g> 183 <path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/> 184 </g> 185 </svg> 186 </div>Share on Facebook</div> 187 </a> 188 189 <!-- Sharingbutton Twitter --> 190 <a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Responsive CSS Inliner for Email Templates&url=https://htmlemail.io/inline/" target="_blank" aria-label="Share on Twitter"> 191 <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> 192 <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> 193 <g> 194 <path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/> 195 </g> 196 </svg> 197 </div>Share on Twitter</div> 198 </a> 199</div> 200 201<h2>Why you should inline CSS<br> in HTML emails</h2> 202 203<p>Email clients are unpredictable. Even today many clients strip styles that are not inlined, so it is important to inline your CSS before sending. Don't risk your transactional emails or marketing campaigns falling apart.</p> 204 205<div class="group"> 206 <div class="span6"> 207 <div class="example example__bad"> 208 <img src="https://htmlemail.io/img/desktop-notinlined.jpg" alt="Desktop email without inlined CSS"> 209 <h5>Without inlined CSS</h5> 210 <p>Sometimes layouts break on desktop as the email client doesn't recognize CSS that isn't inlined.</p> 211 </div> 212 </div> 213 <div class="span6"> 214 <div class="example example__good"> 215 <img src="https://htmlemail.io/img/desktop-inlined.jpg" alt="Desktop email with inlined CSS" class="example"> 216 <h5>With inlined CSS</h5> 217 <p>Everything looks pixel perfect on desktop as you designed it.</p> 218 </div> 219 </div> 220</div> 221<div class="group"> 222 <div class="span6"> 223 <div class="example example__bad"> 224 <img src="https://htmlemail.io/img/mobile-notinlined.jpg" alt="Mobile email without inlined CSS" width="200"> 225 <h5>Without inlined CSS</h5> 226 <p>Sometimes buttons and other components break on mobile as the email client doesn't recognize CSS that isn't inlined.</p> 227 </div> 228 </div> 229 <div class="span6"> 230 <div class="example example__good"> 231 <img src="https://htmlemail.io/img/mobile-inlined.jpg" alt="Mobile email with inlined CSS" width="200"> 232 <h5>With inlined CSS</h5> 233 <p>Everything is pixel perfect on mobile as you designed it.</p> 234 </div> 235 </div> 236</div> 237 238<h2>How CSS inlining works</h2> 239<p>Paste your HTML with embedded CSS into the input field. We'll take your embedded CSS and inline those styles making your email templates bullet proof for any email client.</p> 240<div class="group"> 241 <div class="span6"> 242 <div class="example example__bad"> 243 <img src="https://htmlemail.io/img/code-notinlined.jpg" alt="Code with embedded CSS"> 244 <h5>Before with embedded CSS</h5> 245 <p>Embedded CSS at the top of your HTML is easier for developers to maintain and manage, but certain email clients don't like it.</p> 246 </div> 247 </div> 248 <div class="span6"> 249 <div class="example example__good"> 250 <img src="https://htmlemail.io/img/code-inlined.jpg" alt="Code with inlined CSS"> 251 <h5>After with inlined CSS</h5> 252 <p>Inlined CSS behaves in all email clients but it's not the easiest or prettiest to write. Our inliner does it for you.</p> 253 </div> 254 </div> 255</div> 256<p>Our CSS inliner is powered by <a href="https://github.com/Automattic/juice" target="_blank">Juice</a>. We use this for our own templates and as it is an open source project it is constantly being working on and improved. You can inline your CSS above then copy the output into your email service provider or codebase. Or you can use a Juice module and inline the CSS in your codebase before your emails are sent.</p> 257 258<h2>FAQ & Help</h2> 259 260<h4>How do I inline an external stylesheet?</h4> 261<p>The best way to use this inliner is with "embedded" CSS i.e. your styles are in the <code><head></code> of your HTML document.</p> 262<p>If you're using an external stylesheet you'll have to first copy those styles over between a <code><style></code> tag.</p> 263 264<h4>How do I ignore CSS so I can persist some styles in the output?</h4> 265<p><code>@media</code> queries are ignored by default so your responsive styles remain.</p> 266<p>Some times you want to keep some other styles embedded and not inline them e.g. pseudo styles, keyframe animations etc. This can be done adding <code>data-embed</code> attribute to your <code><style></code> tag i.e.<code><style media="all" type="text/css" data-embed></code></p> 267<p>I recommend having one <code><style></code> block for CSS you want to inline and another <code><style></code> block for CSS you want to persist.</p> 268 269<h4>How do I get started?</h4> 270<p>Paste your HTML into the textarea above. If you need a template to get started with, use our <a href="https://htmlemail.io/subscribe">free responsive email template</a>.</p> 271
272<script src="https://htmlemail.io/js/inliner.js" defer></script>
272 273 274<div class="exit-overlay js-exit-overlay-copy"> 275 <div class="exit-modal"> 276 <h2>While we copy your inlined CSS…</h2> 277 <p>Subscribe to our HTML Email newsletter and stay up to date with new features as we add them to our responsive CSS inliner.</p> 278 <p>When you subscribe we'll send you a free responsive HTML email that you can download with both embedded CSS and inlined CSS.</p> 279 <p class="align-center"><img src="https://htmlemail.io/img/preview-free.jpg" alt="Free email" width="400"></p> 280 <form action="//leemunroe.us1.list-manage.com/subscribe/post?u=1998df7f0f3a32bdf922938ca&id=4bf2c8f8b9" method="post" class="subscribe-form__footer" target="_blank"> 281 <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Email address"> <button type="submit" class="btn btn-primary js-submit-copy-overlay js-subscribe-exit-overlay">Subscribe</button> 282 </form> 283 <p><a href="#" class="js-close-exit-overlay">No thanks</a></p> 284 </div> 285</div> 286 287</div> 288 289 <footer> 290 <div class="container"> 291 <div class="group"> 292 <div class="span6"> 293 <h3>Sign Up For Offers</h3> 294 <p>When you opt-in we'll send you a free simple responsive HTML email template so you can see it in action.</p> 295 <form action="//leemunroe.us1.list-manage.com/subscribe/post?u=1998df7f0f3a32bdf922938ca&id=4bf2c8f8b9" method="post" class="subscribe-form__footer"> 296 <input type="email" value="" name="EMAIL" id="mce-EMAIL-2" placeholder="Enter email address"> <button type="submit" class="btn btn-primary">Subscribe</button> 297 </form> 298 </div> 299 <div class="span6"> 300 <ul> 301 <li><a href="/blog">Blog</a></li> 302 <li><a href="/send">Send Test Email</a></li> 303 <li><a href="/inline">Inline CSS</a></li> 304 <li><a href="/design-system">Email Design System</a></li> 305 <li><a href="https://github.com/leemunroe/htmlemail/issues">Support / Issue Tracker</a></li> 306 <li><a href="https://github.com/leemunroe/htmlemail/">Documentation</a></li> 307 <li><a href="mailto:[email protected]">[email protected]</a></li> 308 <li><a href="http://twitter.com/htmlemailio">@htmlemailio</a></li> 309 </ul> 310 </div> 311 </div> 312 </div> 313 </footer> 314 315
315<script src="https://htmlemail.io/js/build.js"></script>
315 316 317
317<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>
317 318</body> 319</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.