Inline CSS

Overview

Beefree is a codeless solution for people to create beautiful emails and landing pages. As a result, you may not have any need or desire to understand CSS -- and that’s totally fine! More importantly, that’s exactly why we’re here.

At some point, you may encounter the need to have a basic understanding of how CSS is used in email development. In this article, we’ll talk about what you need to know regarding CSS.

Sending Methods

It’s no secret that an email client may strip syntax from the source code when it's used to send HTML emails. This happens when the email client doesn’t support elements within the source code. So, for example, say you design an email in Beefree that uses a web font, which is inserted into your design via CSS. Then, you export the email and send it via Outlook. Outlook doesn’t support the CSS needed to insert the web font used in your design. As a result, it will ignore this line of code entirely. This also means that recipients will see your fallback font only. Since Outlook ignored the external stylesheet, it never reaches the recipient's inbox.

Professional email sending or marketing platforms offer a solution to this problem. They usually allow you to send an email without altering the source code. This is because compatibility issues will not come up until the email reaches an inbox.

Unfortunately, this isn’t true for all email sending and marketing platforms either. Some of these systems have their own inherent rules about how CSS should be used in HTML documents. As a result, they might alter the source code for your design based on their own guidelines. 

This comes up a lot when people are testing out our builder to see if it’s a good fit for them. They create a beautiful design that shows great results when tested through Beefree. Then, they will export the design to their sending platform and start testing it there. Sometimes, this is where they may encounter rendering problems. As a result, they reach out to the support team for their sending platform. The sending platform will often reply to say, “Please make sure that your HTML email is using inline CSS.”

Many times, this becomes a question asked to Beefree support. And we’re more than happy to tell you that the answer is yes - but not always. Now you might be wondering what this means, and why the answer is not always consistent. To understand, let's look at how Beefree turns your beautiful design into an HTML document.

If you already are comfortable with your understanding of CSS, jump to the How Beefree Uses CSS section.

Types of CSS

Let’s start with the basics. When you export an email created in the builder, you receive an HTML document. This document uses a combination of HTML 5, CSS, and VML syntax to generate the source code for your email. The majority of this syntax is HTML and CSS, but VML targets Outlook clients. For now, we’ll just focus on the CSS.

In general, there are three possible ways to use CSS in web development:

1. External CSS
2. Embedded CSS
3. Inline CSS

Technically, the builder uses all three versions of CSS. However, only inline and embedded CSS will be present in every HTML document generated by Beefree. Let’s take a closer look at these three different methods.

Embedded CSS

Embedded (or internal) CSS allows you to create a stylesheet within the head tag of the HTML document. If you have experience with web development, this is a very popular method used for landing pages.

You can find embedded CSS in the head of every document generated by Beefree. This embedded CSS is what generates the mobile version of your design. For example, here’s a snippet of embedded CSS from one of the templates available in the Beefree catalog:

Embedded CSS has become more accessible over the last few years. Unfortunately, not all email clients support it. As a result, we’ve continued to use inline CSS to target things like text styles.

Ultimately, Beefree uses embedded CSS for media queries. These media queries create mobile-responsive design elements, and they can’t be inlined.

Inline CSS

Inline CSS occurs when the syntax is applied to a specific HTML element rather than in the head of the document. If you’re not familiar with any coding languages, inline CSS looks very similar to HTML. For example, say you export an email from Beefree and focus on the code generated for a single text content block. Much of this syntax is inline CSS:

Inline CSS is very popular in email development. It’s the most consistent way to ensure that designs will look the same in different email clients. In other development fields, inline CSS is not considered to be a best practice.

Many popular email clients today are beginning to support embedded CSS. Beefree uses both methods to mitigate potential rendering issues in older email clients. For more information on inline CSS in email development, Litmus has a great article on the topic. 

However, inline CSS comes with some drawbacks. It requires repetition of the same syntax to apply consistent formatting. This can result in large HTML documents. In clients that clip emails over a certain size, this is something to keep in mind.

External CSS

As implied by the name, external CSS allows you to use an external stylesheet to introduce CSS styles. External CSS is another popular method in web development. In email development, very few clients support external CSS.

Beefree doesn’t inherently use external CSS. Though there is one use case in which you might find it in your exported HTML: web fonts.

Web fonts are always delivered via an external stylesheet. This is because a web font is not hosted by any specific device - instead, it is hosted on the web. Beefree inserts web fonts via external CSS using the <link> method. This allows the recipient's device to download and display the web font. If you’re using web fonts in your design, you’ll find some external CSS in your HTML document. It will look something like this:

With all this in mind, it’s not surprising that web fonts don’t render properly in all email clients. That’s why using web fonts in Beefree is optional. As a Beefree customer, keep in mind that you have the option to disable all web fonts. This allows you to circumvent this potential issue if you prefer.

How Beefree uses CSS

Ultimately, Beefree generates inline CSS upon the export of your email. However, there are some aspects of the code that are not inlined. This specifically applies to code for mobile responsiveness and web fonts.

As a result, we don’t recommend passing Beefree HTML through a CSS inliner tool. These tools can break mobile responsiveness. Our tests also show that these tools might scramble conditional comments as well. Although this syntax is not CSS, it could cause the email to break in Outlook.

The bottom line is that we recommend using a sending platform that doesn’t alter any of the imported code. Note that some sending platforms come with built-in inliner tools. There may also be an option that allows you to turn it off.