Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the prior videos, we've work to code this multicolumn product email. Let's finish coding this email. Here is where we left off. As you can see, we have all of the elements: We have the copy. We have the email structured as a table so our layout works. However, our final result has a number of differences that are very important that we need to code. Specifically, we need to use CSS styles inline. Let's begin with the navigation links. The navigation links are made up of a single HTML paragraph, or p, tag that surrounds several anchor tags, or links.
We start by styling the paragraph tag, and we define the color, we define the font-family, font-size, the line-height, and then we have the typical margin and padding settings to 0. In addition, we have set the text alignment to center, so that the navigation links center within that area of the HTML email. For each link, we set the color of the link to white, we align it in the center, and we set the margin-right to 25 pixels.
We also set the text-decoration to none. With HTML email, unlike web pages, you cannot set code so that hover makes the link underlined or not underlined. Therefore in HTML email, you have a choice of either using underlines or not, text-decoration set to none or underline. The second part of the HTML email will refine with CSS styles our colors. The original email design has several colors used for the copy.
For example, this heading about Special Occasion Bouquets and Baskets is pink, the tagline underneath is blue, and then for each of the products, the product names are blue and the prices are red to pink. Finally, with colors there is a promo code below the products that is a color and needs to be styled. Let's start with the heading. We have our h1, heading1 style, and we style the color to the pink, and we set the font-family, the font-size, to a large size, the font-weight to normal instead of bold, so it looks clean.
We set the line-height, and we set the margin and padding to 0. One brief mention about line-height: the space between Special Occasion Bouquets and Baskets and the tagline underneath can be defined in any number of ways. We can use margin, we can use padding, or we can use line-height. In this case, I've chosen line-height because it seems more reliable to me in Outlook. The next bit we color is the actual tagline. As with the heading, we define a color, the font-family, the font-size, the font-style--in this case italic.
We set the font-weight to normal, as we did with the heading, and we set the line-height to 14, the same as the font size. The next bit to color are the product names and the product price. Because each of our products are wrapped in a single paragraph, or p, tag, we define the color of the product name at the paragraph level. So we define the color, the font-family; font-size, we want font-weight as normal, not bold; and we set the line-height; and we set margin and padding to 0.
In addition, we set the text-align to center. To color the price, we take the span that we had added earlier and this time we add the actual color. Then we add these inline CSS styles to every one of the products. In addition to coloring the heading the tagline, each of the product names, and the product prices, we also need to color the promo code.
We set up earlier a span around our promo code of flowers4u, and now we add the style color. Your last bit of coloring has to do with the background color behind the email. We've added a bgcolor value, which is an HTML table element, a very pale blue. We've added a very light blue background color that comes from these flowers, hydrangea deluxe. The last bit of styling we need to do are the borders around each of the products.
For now, we have set these border styles at the image level, so that every image will have a thin two-pixel border around it. And this is the result of our HTML table layouts, adding the copy, adding the CSS styles.
Get unlimited access to all courses for just $25/month.Become a member
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.