I’m creating HTML emails and noticed that Gmail removes inline CSS style attributes from my elements. When I check the source code using developer tools, the styles I added are completely gone. This happens on both desktop and mobile versions of Gmail.
I’ve been testing different scenarios and it looks like Gmail strips the style attributes when an element has both inline styles and CSS classes. Also, it seems like table elements lose their style attributes no matter what.
Other email clients like Yahoo display the emails correctly with all the inline styles intact. Only Gmail is causing this problem.
Has anyone else experienced this issue? What are some reliable ways to work around Gmail’s style stripping behavior? I need my emails to look consistent across all major email providers.
Gmail’s the worst for this. I just slap !important on everything in embedded CSS within the <style> tag - Gmail actually handles that better than inline styles half the time. Also throw in Gmail-specific selectors like .im since they don’t strip those as much. Email dev sucks but that’s how it is.
Gmail’s approach to CSS has been a long-standing challenge for email developers. It notably removes styles for security reasons, particularly from div elements and layout-affecting styles. To navigate this, focus on using table-based layouts with inline styles applied directly on td elements; these are typically preserved by Gmail. Avoid CSS shorthand in your inline styles, as they are often stripped out. Additionally, consider placing Gmail-specific styles in the head section, as Gmail does retain some of these. Specifically targeting Gmail with media queries can also help ensure your emails render correctly.
I’ve fought this same battle for years with email campaigns. Here’s what actually works: ditch inline CSS and use HTML attributes instead. Use bgcolor=“#ffffff” on tables rather than style=“background-color: #ffffff” - Gmail respects the attributes way more. Same with width, height, and cellpadding. Also, forget complex CSS properties. Stick to the basics: color, font-size, text-align. That’s it. And here’s the kicker - Gmail hates nested elements and strips their styles like crazy. Keep your HTML structure flat and you’ll see a huge difference.