Since the BEE editor is intended as a way for people to make beautiful emails without any coding knowledge, 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.
However, depending on the sending method that you use in conjunction with BEE, you may eventually 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.
It’s no secret that, while using an email client to send an HTML message, the email client may strip syntax that it doesn’t support from the source code before it sends the message. So, for example, say you design a message in BEE that uses a web font, which is inserted to your message via CSS. Then, you export the message and send it via Outlook. Since Outlook doesn’t support the type of CSS needed to insert the web font used in your message, it will ignore this line of code entirely. As a result, every single recipient will see your fallback font, because the external stylesheet was ignored by Outlook before the message reached their inbox.
Professional email sending platforms or email marketing platforms offer a solution to this problem. They allow you to send a message without altering the source code since it won’t encounter any compatibility issues until it reaches an inbox in a specific email client.
Unfortunately, the fact of the matter is that 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, and they might alter the source code for your message based on their own guidelines.
This comes up a lot when people are testing out the BEE editor to see if it’s a good fit for them. They design a beautiful message that shows great results when they send a test message through the editor. But once they export the message and start testing it with their sending method of choice, they begin encountering rendering problems. When they reach out to the support team for their sending platform, they are often told, “Please make sure that your HTML message is using inline CSS.”
Many times that question is deferred to BEE support. And we’re more than happy to tell you that the answer is yes - but not always. In order to understand what this means and why, we need to look at how the BEE editor turns your beautiful design into an HTML document.
If you already are comfortable in your understanding of different types of CSS, you can jump down to the How BEE Uses CSS section.
Types of CSS
Let’s start with the basics. When you export a message that is created in the BEE editor, you receive an HTML document. This document uses a combination of HTML 5, CSS, and VML syntax to generate the source code for your message. The majority of this syntax is HTML and CSS, but VML is used to target Outlook clients. For now, we’ll just focus on the CSS.
There are three ways that CSS can be used in web development in general:
- External CSS
- Embedded CSS
- Inline CSS
Technically, the BEE editor uses all three versions of CSS in the HTML that it generates, but only inline and embedded CSS will be present in every single HTML document generated by BEE. Let’s take a closer look at these three different methods.
Embedded (or internal) CSS allows you to create a stylesheet that is embedded directly into the head tag of the HTML document. If you have any experience with web development, this is a very popular method used in developing landing pages.
You can find embedded CSS in the head of every document generated by the BEE editor. This embedded CSS is always what generates the mobile version of your message. For example, here’s a snippet of embedded CSS from one of the templates available in the BEE catalog:
While embedded CSS has become more accessible over the last few years, not all email clients support it. As a result, we’ve continued to use inline CSS to target things like text styles. The BEE editor uses embedded CSS mostly for media queries that allow our messages to be responsive since those can’t be inlined.
Inline CSS occurs when the syntax is applied to a specific HTML element rather than being indicated in the head of the document. If you’re not familiar with any coding languages, inline CSS looks very similar to HTML. For example, if you export a message from the BEE editor and focus just on the code generated for a text content block, much of this syntax is written as inline CSS:
Inline CSS is popular because it’s the most consistent way to ensure that your message will look the same across a variety of different email clients. While many popular email clients today are beginning to support embedded CSS, we’ve opted to continue using both embedded and inline CSS since recipients using older versions of any email client run the risk of receiving a bad-looking message. For more information on why inline CSS is still used in email development today, Litmus has posted a great article on the topic.
However, inline CSS comes with some drawbacks. It can generate quite a long HTML document, as you may need to insert the same syntax multiple times in the same document in order to make sure that you’re using the same formatting across multiple text blocks in your message. In clients that clip messages over a certain size, this is something that you certainly need to be aware of.
As the name implies, external CSS allows you to use an external stylesheet to introduce CSS styles to your message. External CSS is very popular in terms of web development, but in terms of email clients, very few support this method.
The BEE editor doesn’t inherently use external CSS, but there is one use case in which you might find it in your exported HTML: web fonts.
Regardless of where web fonts are used, they 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. In order to introduce a web font using the same method that BEE does, you need to insert external CSS via the <link> method so that the font can be downloaded and displayed on the recipient's device. So, if you’re using web fonts in your message, you’ll find some external CSS in your HTML document that looks something like this:
Since web fonts can only be delivered via external CSS, which has very poor email client support, it’s not surprising that web fonts don’t render properly in all email clients. That’s why using web fonts in the BEE editor is optional, and as a BEE Pro customer, you even have the option to disable all web fonts if you’d prefer to circumvent this potential issue entirely.
How BEE uses CSS
Ultimately, the BEE editor inherently generates inline CSS upon the export of your message. However, there are some aspects of the code that are not inlined, such as syntax that generates a mobile-responsive code.
As a result, we don’t recommend passing BEE HTML through a CSS inliner tool, as it can break mobile responsiveness. Our tests also show that inliner tools might scramble conditional comments that are used to target specific email clients (Outlook primarily), although this syntax is not CSS.
The bottom line is that we recommend using a sending platform that doesn’t alter any of the code that you import into their system. For some sending platforms with built-in inliner tools, there may also be an option that allows you to turn it off.
If you need more information on how CSS is used in the BEE editor, feel free to open a support ticket with us!