Sales pages, to be effective, must immediately catch the attention of even a casual web surfer. The sales message contained in the sales page must be both easy to read and understand. If the content-display styling is well crafted, the sales message can be absorbed after just a rapid page scan. An interested reader will re-read the page for the details.
Sales copy provides the content which entices the reader to move deeper into the page towards the "Order Now" button.
The job of a Cascading Style Sheet (CSS) is to
facilitate page navigation,
improve readability, and
call attention to important content.
There are lots of articles and ebooks available on the Web about *writing* profitable sales copy. You can easily find them with a quick search. This article focuses on *styling* the sales page and its content with CSS.
There are several advantages to using CSS for display styling. One of the best reasons is that it frees the copy writer from initial concerns about page formatting. Using very basic HTML code, the page content can be written with any basic text editor without concern for special content formatting.
In this article, the CSS code is used to display a template sales page. This link, unformatted sales page, will let you see what the sales page looks like before any CSS styling has been applied. Only very basic HTML code is necessary for the initial sales page. All of the content has been collected and placed (roughly) in the order it will be used. CSS will do the rest.
After the sales copy is written, important page elements (identified through HTML tags) and content (information between HTML tags) can be identified and linked to the appropriate CSS formatting code for browser display. A previous article, "Create Quality Articles With CSS", explains how the HTML content gets linked to the CSS code. Briefly, the HTML-CSS link is done through the HTML "link" meta tag and content is identified through class and id tag attributes and through the use of the HTML span tag.
Content specific styling includes special text formatting, such as highlighting and quotations, and the placement of items such as images and forms within the page.
I like to display the content in roughly the middle half of the monitor display and like to use a line length of about 60 characters. I also like to use a large enough font size to make blocks of text easy to read.
Because the page layout is so important, I use a fixed table design for the content: the content is placed in the center of the display and is framed in by wide right and left margins and narrow top and bottom margins. If the width of the browser page is narrowed by the reader, the right and left margins will narrow equally but the content area will remain the same width, and thus the content layout remains the way it was designed (i.e., not "liquid").
Essentially, my basic page layout consists of 4 nested "boxes:"
HTML Box -- demarcated by <HTML> tags and contains all other boxes.
BODY Box -- demarcated by <body> tags and contains the table and main-content boxes.
Table Box -- demarcated by <table> tags and contains the main-content box.
Main-Content Box -- demarcated by <div> tags and contains the sales-page content.
The HTML box includes the entire HTML document (except for the document-type declaration). The Body box contains everything visible to the reader. The Table box contains the sales page. The Main-Content box, as the name implies, includes all of the visible content of the sales page.
By default, boxes inherit the CSS attributes of the "parent" boxes in which they live. Each box, however, can have its own code and can modify the code it inherits. For example, a table box can have a different background color than the body box that contains it. However, without additional CSS coding, it would inherit the background specified in the body box.
A sales page requires both global and content-specific CSS styling. Global styling includes such considerations as the page background, default font and line attributes, and page margins. Here is the global code I include in my CSS file for sales pages:
BODY {
font-size : 62.5%;
font-family : Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
color : black;
line-height : normal;
background-image : url(images/dblue053.gif);
}
#main_content {
font-size : 1.6em; /* this sets the default font size for the sales page and will display at 16px */
margin : 5%;
}
H1 {
font-size : 2.25em; /* will display at 36px */
}
H2 {
font-size : 1.5em; /* will display at 24px */
}
H3 {
font-size : 1.25em; /* will display at 20px */
}
H4 {
font-size : 1.125em; /* will display at 18px */
}
table.sales-letter {
width : 60em;
margin-left : auto;
margin-right : auto;
table-layout : fixed;
background : #ffffff;
}
The body code above sets the default for the document's font size to 62.5% of 16px or 10px. This is too small for my sales page and I adjust it in the #main_content section. The body code also sets the font color to black, the line spacing to normal, the font family to sans-serif (with Verdana as the first choice), and specifies a blue background image used for the body background.
I use the #main_content code to set the actual base font size I use for the sales-page text. All other font sizes in the sales page are sized relative to this base. Unless otherwise specified, all text in the sales page will be 1.6em or 16px.
I use the margin attribute to provide content spacing between the content and borders around content.
The "Hn" tags set the basic header sizes and are calculated based on the font size I specified for the #main_content. As an example, since I will be using a default font size of 16px for the sales-page content, the H1 font size would be 2.25x16px or 36px. The "Hn" tags can later be modified with additional attributes, such as color and centering.
The CSS table attributes I use place the sales page in roughly the middle half of the full-size display page (1024x768 pixels). The width of the table, 600px, is just right for the line length I want to use. Since the table-layout attribute is "fixed," the table layout in the browser will be preserved at all times.
Since all of the font sizes are relative to the font_size I set in the #main_content section, all sizes can be made larger or smaller by adjusting just the one value. For more information about the use of ems for sizing, I would suggest a visit to a blog post by Richard Rutter.
(7) I use an unnumbered list for my benefits list. The list can be customized to use a custom bullet and to add extra space between list elements. The CSS code to accomplish my custom list formatting is as follows:
li {
list-style-position: inside;
list-style-image: url(URL of image);
list-style-type: none;
margin-bottom: 1em
}
(8) You can highlight important text with a yellow background.
(12) If you use an image and associate a link with it, you will want to turn off the border or you will get a distracting blue border around the image.
a img {
border : 0;
}
After the template CSS code has been applied, including all of the code above, the the CSS-formatted sales page now has some snap.
The best way to understand how to use and apply CSS to an HTML sales page is to download sample HTML and CSS code and "play" with the code.
