Project Solution: HTML Email Integration of CSS Styles

Now that our content is in place, let's get into styling it. For this project, we can't use an external stylesheet as the email engine is different from a web browser. This is why we have to go in for embedded stylesheets.

Let's get started with the <style> tag in our <head>.

First off, let's center the entire body by setting a value of "auto" to margin. Next, we'll set a specific width, say 700 pixels, and a font-family of "sans-serif". Though we can use custom fonts, I prefer to go with built-in ones for emails.

<style>
    body {
      margin: auto;
      width: 700px;
      font-family: sans-serif;
    }

Next, we'll work on the #heading. Let's set a height of 400px a background color, and a background image of Tesla cars that we decided earlier. Since we don't want a tiled background, we're setting a value of no-repeat. Lastly, we want the background size to be equal to 100%.

#heading {
      height: 400px;
      background-color: #00004d;
      background: url('teslas.jpg') no-repeat;
      background-size: 100%;
    }

If you go to the browser, you'll see that its coming along nicely.

Next, we'll work on the #content where we'll have a padding of 15px on the top and left. Then, we'll set the color of our h1 tag to white and h3 tag to a shade of green, so they're visible on the background.

#content {
      padding-top: 15px;
      padding-left: 15px;
    }

    #content h1 {
      color: white;
    }

    #content h3 {
      color: #6BAE3D;
    }

Next, we'll work on the image. We'll have a width of 100% and put a value of 0px for the left padding.

#content img {
      width: 100%;
      padding-left: 0px !important;
    }

The next thing that we'll work on is the alert class. If you look at the html code, this is the class that has an external link. Let's give it a greenish color, a padding of 15px all around, and a border-radius of 5px. We have to obviously set the border-radius separately for each browser. Finally, we're going to set our width and a top margin.

.alert {
      background-color: #00446A;
      padding: 15px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      width: 250px;
      margin-top: 180px;
    }

The output looks much closer to how we want, though there's still some work that needs to be done.

The next logical step is to style the link. For this, we don't want any text decorations, but we want a white color and a slightly larger font size.

.alert a {
      text-decoration: none;
      color: white;
      font-size: 1.5em;
    }

The email is much better now.

If you notice, this is a clickable area that can take you to a landing page or website.

The last thing is our footer. We'll set the background color to green, and the height to 90px. For the text, let's go with a color of white, some left and top padding, and a slightly big font size.

#footer {
      background-color: #6BAE3D;
      height: 90px;
    }

    #footer-text {
      color: #FFFFFF;
      font-size: 14px;
      padding-left: 20px;
      padding-top: 35px;
    }

That's it!

The email looks like this:

And I think, that's cool!