Embedding CSS file in html e-mail

Sending html e-mails opens a whole can of worms on the many ways e-mail can be viewed. There is also no guarantee your e-mail will look as intended.

Instead of linking to a remote css file that may be blocked, or prompt the user with a scary ‘prevented external content to load’ error message, we can use PHP to pull the file directly. This adheres to the DRY principle and keeps the code base clean.

Use the file_get_contents function in place of linking a style sheet via an html style element.

I would also recommend a try/catch block in case the file_get_contents command fails.

Solution

In head section:

<style type="text/css" media="screen">
    <!-- we do this to embed the file contents into the e-mail.
    <?php echo file_get_contents("../common/css/blueprint/screen.css"); ?>
    -->
</style>

Significant Revisions

  • May 6th, 2024 Converted to jekyll markdown format and copied to personal site
  • Jul 13th, 2011 Originally published on txcowboycoder wordpress site1

Footnotes

  1. Initial md Generated using https://github.com/jsr6720/wordpress-html-scraper-to-md

    Original Wordpress categories: [‘PHP’]

    Original Wordpress tags: “PHP”, “clean code”, “CSS”, “email”, “embed”, “php” ↩