Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In two earlier videos, we've worked to code this two-column HTML email. Let's finish the coding of this email by adding CSS styles. This is the email that we are trying to code. If you recall, this is where we left off with our HTML coding. We had created tables to hold our email design together, and we had added copy. However, there's a lot of styling that needs to be done before our design looks like our finish result. For example, we need a large colored W, so let's go into the code.
Earlier, we had set a span around the letter W, because we knew we were going to come back and add these styles. We've added color, and we've added the font-size to 20. We've also gone up to the paragraph that holds this letter W and we've made the line-height to 18 pixels. This ensures that even though the letter W is bigger than other letters in that content area, in fact, it won't throw off the spacing between the lines of content. The next area we needed to work on as to do with the tour descriptions on the right side of the content.
Each tour description has a logo, copy, and then an Explore link that when clicked, provides more information. So let's work on that area next. If you recall, when we set up the table layout in HTML, we put each of these tour descriptions as a table within a larger table data cell. So in our table that represents our tour information, we have a table data cell that includes an image that we've added. The second table data cell in our table that explains each of these tours contains the copy, and so we've added the copy earlier, but now we've added these styles. We've defined the color of the font, the font-family, the font-size, line-height, and then the margin and padding values.
In addition, for the Explore link we've also defined the paragraph style, and we've set text-align to right. This will ensure that the small explore links float to the right. And we repeated this for every single one of the tour descriptions. Another area that we needed to style is the footer. The link colors, for example, are too dark. So let's go to our footer table in our code. You'll see that we still have the link names, but now we've added a whole set of styles above for the paragraph tag, including the color set to white and the font-size set to 10 pixels and the margin and padding set to 0, and then we repeat this for each of the links in the footer boxes.
When we go back, you'll see there are three books and our BUY buttons are fine, so we don't really need to do anything more than to define very basic styles for them. We've set the margin and paddings to 0, and we've included the images. Finally, the last bit of content to style is in the footer. Where we left off, all of this information was centered. Now, it needs to be floated to the right to meet our final design. So here we have added a style to the paragraph tag and as with the Explore buttons, we've put text-align equals right.
We've also defined the font-size, the font-family, and the color, and then we repeat the CSS styles for the final copyright paragraph. Now that we've coded the CSS styles, we have a design of our HTML email that is very, very close to the original design.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 74959 Viewers
80 Video lessons · 129933 Viewers
52 Video lessons · 64111 Viewers
59 Video lessons · 49904 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.