The code is shown in the image. You can see that there are two points where the background color is set: bgcolor is the tag table attribute; background-color is the CSS attribute applied to the table. The two attributes do the same thing, and therefore they overlap: they impose the color orange (#e75c00 according to the hexadecimal format) on the background of the table. The critical point should now be clearer: HTML and CSS property definitions can stack on top of each other. In fact, when redesigning or modifying the same email template, the code can often get bogged down in redundant properties that perform the same function. And that's not all.
Since inline styles can be applied to each element, this (perverse) case can also occur: A browser (or email client) would read the code more or less like this: Apply a gray background to the table Ten apply a black background to the line Finally, apply an orange background to the cell containing the text Hello World! The end result is the same in this example as Image Masking Service in the previous one: white text on an orange background. The problem is that three different substantive rules have been defined in the second case. The one seen by the user is the one defined with respect to the cell, because the browser reads the code sequentially (table -> tr -> td). Since the last definition was set to the <td> , that is precisely what will be displayed. It is clear that much of the code is not necessary.
This is not only because the only background color displayed is the one applied to the cell, but also because one of the goals of good email marketing is to keep communications as clear as possible. possible. Very verbose, redundant code is not lightweight code. Our recommendations : Keep the code as clean as possible Avoid unnecessary repetitions when formatting code Prioritize inline styles Try to build a modular structure for the communication code Try to keep the code as tidy as possible through indentation (there are several online services that do this.