Tips for Using CSS in HTML Emails

Using CSS in HTML emails can be a tricky business, mostly because it seems like just about every email client has different rules about the amount of CSS they support. Keeping this in mind, here are some tips to use that will help make sure your HTML emails are compatible across all email clients and browsers.

  • Make sure you do all your styling inline rather than including it in the <head> section of your HTML email — Gmail doesn’t support CSS defined in the <head>. Don’t bother trying to use external stylesheets either, as this also isn’t universally supported.
  • Use tables. Most developers (rightly) cringe at the mention of tables, but because many email clients don’t support things like divs, margins, and floats or float clears, using tables to structure the layout and content of your HTML email is a good way to control the positioning of the content while making sure the email is cross-client compatible.
  • Don’t make your email too wide. Usually keeping the width to 500px or less is a good idea, give or take 50 px.
  • Don’t include background images or videos in your HTML emails. Many popular email client lack support for both of those features. Regular images, however, are universally supported, so feel free to insert images into your emails, but be sure to use images that aren’t too big and to include some alt text just in case.
  • Don’t use javascript. Email programs see it as spammy and it’s also often not supported.
  • When in doubt, simplify your code as much as you can. An email with a simpler design and basic code is always more likely to be universally supported than anything more complicated or intricate.

Using the Max-Width Property in Responsive Design

Most developers know that in order for a site’s structure to be responsive and mobile-friendly, it’s better to define widths of divs and other HTML elements using percentages rather than pixels. Using percentages to define widths allows the widths of HTML elements to change while maintaining the same relation to the size of its parent […]

Read on...

Create Dropdown Hover Effects Using CSS

Many developers choose to use JavaScript or jQuery to create simple dropdown hover effects, but the same effect can be achieved in a much more lightweight way by using CSS.   If you want an HTML element to appear when another element is hovered upon, your HTML might look something like this: The .hover div is […]

Read on...

Create Columns Easily with CSS3’s Column-Count

CSS3’s column-count property makes it easy for you to turn your content into columns with only one line of CSS and no extra HTML markup. Let’s say you have a div made up of a few paragraphs, like this: If you want to spread that content out across three adjacent columns, you can do it […]

Read on...

CSS3 Embossed Text Effect

CSS3’s text-shadow property can be used to achieve so many cool text effects, including an embossed effect. This effect is created by giving the text-shadow property  values of -1 for the horizontal and vertical shadow, and leaving the blur-radius at its default of 0. Then horizontal and vertical shadow values of positive 1 are layered on […]

Read on...

CSS Shorthand Properties

Condense your CSS code by writing in CSS shorthand! A few CSS properties allow for one single property to replace many properties. For example, if you want to give an element a different amount of padding on each side, it could look like this: But why write excess code if you don’t have to? These four […]

Read on...

CSS List Styles

HTML unordered lists are characterized by <li> elements within a <ul> tag. The default styling of these unordered lists indicates that each individual list item is to follow a round bullet symbol, but the list-style-type property does take other values. Setting the list-style-type value to circle, for example, will cause the default bullet styling to be […]

Read on...

The Universal Reset

CSS resets are used to override the default stylesheets that modern browsers use. Because each browser uses a different stylesheet, certain elements (submit buttons, links, etc) don’t always have consistent styling across all browsers. A CSS reset will wipe out some of the browser’s default styling by replacing it with a set of completely customizable style rules […]

Read on...

12 Responsive CSS grid systems

A grid system provides designers with a structure to present their work in a much more manageable and readable way. The grid systems helps in attaining a level of consistency in designs throughout a site. Here are 12 responsive CSS grid systems that help to make sites more more responsive, beautiful and organized. 1. Motherplate […]

Read on...

10 Awesome CSS tools for designers

It is essential for developers to use design tools to increase their knowledge and get projects completed faster. Here are 10 tools which will be of great help to CSS designers. Using these tools can minimize the effort and time that a developer must put into designing a web page. 1. Stylizr This CSS tool […]

Read on...