Inline Styles for Email
Apply CSS inline to ensure consistent rendering across email clients.
Inline Styles for Email is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Inline Styles?
Many email clients — most notoriously Gmail web before May 2016 and several mobile apps still today — strip or rewrite <style> blocks and external stylesheets. Inline style="..." attributes are the only CSS guaranteed to survive every client.
Author in External CSS, Ship Inlined
Writing inline styles by hand is unmaintainable. Author the email with normal <style> tags and class names, then run an inliner (Juice, Premailer, mjml) at build time to copy each rule into the matching element's style attribute before shipping.
Specificity Wins
Inline styles have the highest specificity short of !important. A media query that wants to override an inline value must use !important on every property, because the inline declaration otherwise wins regardless of @media context.
@media (max-width: 600px) {
.col {
width: 100% !important;
display: block !important;
}
}Inliners Do Not Touch @media
Inliners copy only the rules that match individual elements; @media blocks stay inside the <style> tag because they cannot be flattened. This is fine — Gmail and other strippers leave the inline styles intact, and clients that respect <style> tags apply the media queries on top.
Avoid Shorthand
Some clients break on shorthand: font: 14px/1.4 Arial may be ignored entirely. Use the long form (font-family, font-size, line-height) so each property either works or fails independently.
Always Set Color and Background
Dark mode automatically inverts colors on many clients. Explicitly setting color and background-color on text containers prevents black-text-on-black-background catastrophes. Always pair the two.
Length Units
Stick to px for sizing. rem, vh and vw are inconsistently supported. Percentages work on tables for full-width layouts; absolute pixel widths on inner tables and cells render identically across clients.
Fonts: Web-Safe Stacks
Web fonts via @font-face work in Apple Mail, iOS Mail, and Thunderbird but fail in Outlook and Gmail. Use a web-safe stack as the inline value (Arial, Helvetica, sans-serif) and reserve @font-face purely as a progressive enhancement for clients that support it.
Background Images and Outlook
Inline background-image on a div works in modern clients but is ignored by Outlook. Use bgcolor as fallback and conditional VML <v:rect> for Outlook so every client renders a visually equivalent background even when full fidelity is impossible.
Test in Real Clients
Inline styles look right in a browser preview but may still render differently in Gmail, Outlook, or iOS Mail. Use Litmus, Email on Acid, or the free Mailtrap previews to verify each major client before sending the campaign.
Reset Styles
Add a small reset in the <style> tag (margin: 0 on body, line-height: 100% on tables, border: none on images) to neutralize default client styles. Wrap it in a media query if you want to apply it only where <style> is honored.
Knowledge Check
Why do media queries in HTML email require !important on every property?
Summary
Email needs inline styles to survive client stripping, but author normally in <style> and inline at build time. Use !important inside media queries to beat inline specificity, prefer long-form properties over shorthand, set color and background-color explicitly, stick to px units, and test in real clients before sending.
Frequently asked questions
Is the “Inline Styles for Email” lesson free?
Yes — the full text of “Inline Styles for Email” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Inline Styles for Email”?
Apply CSS inline to ensure consistent rendering across email clients. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Inline Styles for Email” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.