How to Style a “Call to Action” Area with Minimal Code

Doing front-end development for a full service web design company means I’m often involved in very high-end, corporate websites that require styling “call to action” (CTA) or “promo” areas on the home page. These areas usually consist of 3 or 4 boxes that are most likely going to change at some point, and the client might even ask for one or more of the CTA boxes to include dynamic content. What is often troublesome about these boxes is that, more often than not, they don’t contain consistent content. They might have different colored titles, different background images, variations in text size, and so on.

If we’re not careful, our CTAs can suffer from divitis, too many attributes, and CSS-overload. In this tutorial, which is mainly aimed at CSS beginners, I’ll teach you how to create a nice clean CTA that is easy to modify and contains minimal styles and markup.

First, here is the HTML code from a badly-coded CTA, with the equally-bloated CSS below it:

<div id="promo_holder">

  <div id="promo_1">
  <h2 id="promo_title_1">Title Number One</h2>
  <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

  <p class="center"><a href="promo_1.html" id="promo_link_1">Read More</a></p>
  </div><!-- promo_1 ends -->

  <div id="promo_2">
  <h2 id="promo_title_2">Title Number Two</h2>
  <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

  <p class="center"><a href="promo_2.html" id="promo_link_2">Read More</a></p>
  </div><!-- promo_2 ends -->

  <div id="promo_3">
  <h2 id="promo_title_3">Title Number Three</h2>
  <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

  <p class="center"><a href="promo_3.html" id="promo_link_3">Read More</a></p>
  </div><!-- promo_3 ends -->

</div><!-- promo_holder ends -->

The CSS:

#promo_holder {
  clear: both;
  width: 751px;
  height: 250px;
  margin: auto;
}

#promo_holder p.center {
  text-align: center;
}

#promo_1 {
  float: left;
  width: 223px;
  padding: 12px 10px 0 10px;
  height: 238px;
  border: solid 1px #ccc;
  margin: 0 8px 0 0;
  background: transparent url(images/promo_1.jpg) no-repeat 0 0;
}

  #promo_title_1 {
    text-align: center;
    color: #f0f;
  }
  
  a#promo_link_1:link, a#promo_link_1:visited {
    color: #0ff;
    text-align: center;
  }

#promo_2 {
  float: left;
  width: 223px;
  padding: 12px 10px 0 10px;
  height: 238px;
  border: solid 1px #ccc;
  margin: 0 8px 0 0;
  background: transparent url(images/promo_2.jpg) no-repeat 0 0;
}

  #promo_title_2 {
    text-align: center;
    color: #00f;
  }

  a#promo_link_2:link, a#promo_link_2:visited {
    color: #f5f;
  }

#promo_3 {
  float: left;
  width: 223px;
  padding: 12px 10px 0 10px;
  height: 238px;
  border: solid 1px #ccc;
  margin: 0;
  background: transparent url(images/promo_3.jpg) no-repeat 0 0;
}

  #promo_title_3 {
    text-align: center;
    color: #0f8;
  }

  a#promo_link_3:link, a#promo_link_3:visited {
    color: #f00;
  }

Here is a demo page (opens in a new window) to view the above code in your browser. Please don’t be too flabberghasted by the beautiful design! :o)

From a simple scan of the HTML and CSS above, you might immediately notice that there is a lot of code there — far too much code for 3 simple CTA boxes. This is despite the fact that the CSS uses shorthand for padding, margin, and background. So what can we do to trim down both the HTML and CSS?

The code above is not really all that bad; it’s commented, it’s well-indented, and it’s W3C compliant — but it’s not as efficient as it could be. Let’s start from scratch and recode the entire CTA so you can see the basic process involved in coding clean and meaningful HTML and CSS.

First, let’s strip down our HTML to ensure we have as little markup as possible. We’ll also change our primary promo IDs to classes, and remove all extras except the “center” class on the <p> tags, which we still need:

<div id="promo_holder">

  <div class="promo">
    <h2>Title Number One</h2>
    <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

    <p class="center"><a href="promo_1.html">Read More</a></p>
    </div><!-- promo_1 ends -->

  <div class="promo">
    <h2>Title Number Two</h2>
    <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

    <p class="center"><a href="promo_2.html">Read More</a></p>
  </div><!-- promo_2 ends -->

  <div class="promo">
    <h2>Title Number Three</h2>
    <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

    <p class="center"><a href="promo_3.html">Read More</a></p>
  </div><!-- promo_3 ends -->

</div><!-- promo_holder ends -->

The ultimate goal here is to produce the same visual result as the bloated code above, but to use as little code as possible. So we need to figure out what our CTA boxes all have in common, and apply those visuals globally via CSS. The common elements in all three of our CTA boxes are:

• Width of 223px
• Height of 228px
• Box floated left
• Heading centered
• Left-aligned, black paragraph text
• Centered text link
• 12 pixels of top padding
• 10 pixels of left and right padding
• A background image
• A right margin of 8px (except for the last box)

The rest of the styles are specific to a single box, so we’ll deal with them later. For now, let’s rewrite our CSS by applying the above list items as “defaults”, being sure to change our primary IDs to classes to match the changes we made in the HTML:

#promo_holder {
  clear: both;
  width: 751px;
  height: 250px;
  margin: auto;
}

.promo {
  float: left;
  width: 223px;
  padding: 12px 10px 0 10px;
  height: 238px;
  border: solid 1px #ccc;
  margin: 0 8px 0 0;
  background: transparent url(images/promo_1.jpg) no-repeat 0 0;
}

  .promo h2, p.center {
    text-align: center;
  }

Already you can see how much code we’re going to save by using “classes” and taking advantage of the CSS cascade. Notice that we’ve also included the right-margin setting of 8px and the “promo_1.jpg” background image in our global “promo” selector, which will apply to all 3 boxes. Although the margin and background image will be overriden in subsequent styles for one or more of the other boxes, they can be applied in the promo globals to save us a few keystrokes later. We’ve also grouped our <h2> and <a> tag styles to ensure they are centered.

Now, we have two options: We could add unique IDs to each of the promo boxes to apply unique styles to each box, or simply add an extra class to each. It’s really a matter of preference, but I personally like to use extra classes, as I have found that IE6 gets buggy when styles are applied via class and ID on the same element. So, using classes, the resulting HTML is shown below:

<div id="promo_holder">

  <div class="promo promo_1">
    <h2>Title Number One</h2>
    <p >Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

    <p class="center"><a href="promo_1.html">Read More</a></p>
  </div><!-- promo_1 ends -->

  <div class="promo promo_2">
    <h2>Title Number Two</h2>
    <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

    <p class="center"><a href="promo_2.html">Read More</a></p>
  </div><!-- promo_2 ends -->

  <div class="promo promo_3">
    <h2>Title Number Three</h2>
    <p>Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area. Content for promo area.</p>

    <p class="center"><a href="promo_3.html">Read More</a></p>
  </div><!-- promo_3 ends -->

</div><!-- promo_holder ends -->

Thus, each promo box has a secondary class attached, so now we are free to style the contents of each box independently without needlessly duplicating default styles. In this example, the unique styles we want to apply are the heading colors, background images, link colors and the right margin that needs to be removed from the last box. Here’s the CSS after we’ve applied those changes:

#promo_holder {
  clear: both;
  width: 751px;
  height: 250px;
  margin: auto;
}

.promo {
  float: left;
  width: 223px;
  padding: 12px 10px 0 10px;
  height: 238px;
  border: solid 1px #ccc;
  margin: 0 8px 0 0;
  background: transparent url(images/promo_1.jpg) no-repeat 0 0;
}

  .promo h2, p.center {
    text-align: center;
  }
  
  .promo_1 h2 {
    color: #f0f;
  }
  
  .promo_1 a:link, .promo_1 a:visited {
    color: #0ff;
  }

.promo_2 {
  background-image: url(images/promo_2.jpg);
}
  
  .promo_2 h2 {
    color: #00f;
  }
    
  .promo_2 a:link, .promo_2 a:visited {
    color: #f5f;
  }

.promo_3 {
  background-image: url(images/promo_3.jpg);
  margin: 0;
}
  
  .promo_3 h2 {
    color: #0f8;
  }
    
  .promo_3 a:link, .promo_3 a:visited {
    color: #f00;
  }

And that’s it!

Here is the same HTML page with the improved code (opens in a new window).

The visual display of the page is exactly the same as the badly-coded original. But by simplifying our code, we’ve accomplished quite a bit: We’ve made our HTML much more readable and semantic, without attribute-overload; we’ve made our CTA more adaptable to future edits and changes; and we’ve stripped 15 lines from our CSS code (53 lines compared to 68 in our original).

The 15 lines might not seem like a lot — but keep in mind this is just one section of our home page. If we can strip 15 lines of CSS code for every 3 <div> tags, we’ll be well on our way to a much more efficient and faster loading website.