| -- End Ad Box ---> | | | | Unless otherwise specified, all text in the sales page |
| Sales pages, to be effective, must immediately catch | | | | will be 1.6em or 16px. I use the margin attribute to |
| the attention of even a casual web surfer. The sales | | | | provide content spacing between the content and |
| message contained in the sales page needs to be | | | | borders around content. |
| both easy to read and understand. If the | | | | The "Hn" tags set the basic header sizes and are |
| content-display styling is well-crafted, the sales | | | | calculated based on the font size I specified for the |
| message can be absorbed with just a rapid page | | | | #main_content. As an example, since I will be using a |
| scan. An interested reader will re-read the page for | | | | default font size of 16px for the sales-page content, |
| the details. | | | | the H1 font size would be 2.25x16px or 36px. The |
| Sales copy provides the content which entices the | | | | "Hn" tags can later be modified with additional |
| reader to move deeper into the page towards the | | | | attributes, such as color and centering. |
| "Order Now" button. | | | | The CSS table attributes I use place the sales page |
| The job of a Cascading Style Sheet (CSS), is to | | | | in roughly the middle half of the full-size display page |
| * facilitate page navigation, | | | | (1024 x 768 pixels). The width of the table, 600px, is |
| * improve readability, and | | | | just right for the line length I want to use. Since the |
| * call attention to important content. | | | | table-layout attribute is "fixed," the table layout in the |
| There are lots of articles and ebooks available on the | | | | browser will be preserved at all times. |
| Web about "writing" profitable sales copy. You can | | | | Since all of the font sizes are relative to the font size |
| easily find them with a quick search. This article | | | | I set in the #main_content section, all sizes can be |
| focuses on "styling" the sales page and its content | | | | made larger or smaller by changing just the one |
| with CSS. | | | | value. For more information about the use of ems for |
| There are several advantages to using CSS for | | | | sizing, I would suggest a visit to a blog post by |
| display styling. One of the best reasons is that it | | | | Richard Rutter. |
| frees the copywriter from initial concerns about page | | | | After the global formatting is applied page now has |
| formatting. Using very basic HTML code, such as that | | | | some nice-appearing structure.The content now lies |
| allowed for submissions to ezinearticles, the page | | | | between attractive borders and the content is |
| content can be written with any basic text editor | | | | contained on a "page" with adequate margins and on |
| without concern for special content formatting. | | | | a background of choice. |
| Before any CSS styling has been applied, the sales | | | | Below are 12 additional tips, including the CSS code, |
| page would not convert any prospects. At this stage, | | | | you can use to stylize specific elements and text in |
| the HTML document contains all of the "content" that | | | | your sales pages. |
| will be used. Text and images will typically be | | | | (1) I want my headline to be big, bold, red, and |
| positioned on the page in roughly the order these | | | | centered. Here is the CSS code I use:h1.headline |
| elements will be used in the final sales page. CSS will | | | | {line-height : 1.5;color : #cc0000;text-align : center; |
| make everything "pop" and "sizzle" when it is applied | | | | } |
| to the page. | | | | (2) I use a smaller, blue, bold, and centered |
| After the sales copy is written, important page | | | | sub-headline.h2.subheadline |
| elements (identified through HTML tags) and content | | | | {line-height : 1.5;color : #1b356e;text-align : center; |
| (information between HTML tags) can be identified | | | | } |
| and linked to the appropriate CSS formatting code, | | | | (3) I use a small font size for the spider text and |
| contained in separate CSS text file, for browser | | | | copyright. I position the spider text at the top of the |
| display. A previous article of mine, published at | | | | page for the benefit of search engines. |
| ezinearticles, explains how the HTML content gets | | | | #spidertext, #copyright |
| linked to the CSS file. Briefly, the HTML-CSS link is | | | | {font-size : 1.2em; |
| done through the HTML "link" meta tag and content | | | | } |
| is identified through class and id tag attributes and | | | | (4) I use CSS code to position my photo so that it |
| through the use of the HTML span tag. | | | | "floats" to the right and any text to the left flows |
| Content-specific styling includes special text | | | | around the photo. |
| formatting, such as highlighting and quotations, and | | | | .photo |
| the placement of items such as images and forms | | | | {float : right;display : inline; |
| within the page. | | | | } |
| I like to display the content in roughly the middle half | | | | (5) If you want to center section headings and color |
| of the monitor display and use a line length of about | | | | the text red or blue, here is usable code:h3.red |
| 60 characters. I also like to use a large enough font | | | | {line-height : 1.5;color : #cc0000;text-align : center; |
| size to make blocks of text easy to read. | | | | }h4.blue |
| Because the page layout is so important, I use a | | | | {line-height : 1.5;color : #1b356e;text-align : center; |
| fixed table design for the content: the content is | | | | } |
| placed in the center of the display and is framed in | | | | (6) I change the font type for quotations. Using |
| by wide right and left margins and narrow top and | | | | Courier New sets the quotes apart from normal body |
| bottom margins. If the width of the browser page is | | | | text. |
| narrowed by the reader, the right and left margins | | | | .quote |
| will narrow equally but the content area will remain | | | | {font-family : "Courier New", Courier, monospace; |
| the same width, and thus the content layout remains | | | | } |
| the way it was designed (i.e., not "liquid"). | | | | (7) I use an unnumbered list for my benefits list. The |
| Essentially, my basic page layout consists of 4 nested | | | | list can be customized to use a custom bullet and |
| "boxes:" | | | | extra space between list elements. The CSS code to |
| * HTML Box -- demarcated by html tags and contains | | | | accomplish my custom list formatting is as follows:li |
| all other boxes. | | | | {list-style-position: inside;list-style-image: Specify the |
| * BODY Box -- demarcated by body tags and | | | | image URL here;list-style-type: none;margin-bottom: |
| contains the table and main-content boxes. | | | | 1em |
| * Table Box -- demarcated by table tags and | | | | } |
| contains the main-content box. | | | | (8) You can highlight important text with a yellow |
| * Main-Content Box -- demarcated by div tags and | | | | background. |
| contains the sales-page content. | | | | .highlight |
| The HTML box includes the entire HTML document | | | | {background-color : yellow; |
| (except for the document-type declaration). The | | | | } |
| Body box contains everything visible to the reader. | | | | (9) You can emphasize text by making it bold. |
| The Table box contains the sales page. The | | | | .bold |
| Main-Content box, as the name implies, includes all of | | | | {font-weight : bold; |
| the visible content of the sales page. | | | | } |
| A sales page requires both global and content-specific | | | | .boldred |
| CSS styling. Global styling includes such considerations | | | | {font-weight : bold;color : #cc0000; |
| as the page background, default font and line | | | | } |
| attributes, and page margins. Here is the global code I | | | | .boldblue |
| include in my CSS text file for sales pages:body | | | | {font-weight : bold;color : #0000ff; |
| {font-size : 62.5%;font-family : Verdana, Arial, | | | | } |
| Helvetica, Geneva, SunSans-Regular, sans-serif;color : | | | | (10) I like to make sales-page testimonials special by |
| black;line-height : normal;background-image : Specify | | | | framing them and using a pastel background for the |
| the image URL here; | | | | text. |
| } | | | | .testimonial |
| #main_content | | | | {display : block;margin-left : auto;margin-right : |
| {font-size : 1.6em; /* this sets the default font size | | | | auto;background : #fffacc;padding : 1em;border : |
| for the sales page and will display at 16px */margin : | | | | double;border-width : thick;border-color : #999999; |
| 5%; | | | | } |
| }h1 | | | | (11) The purchase form is a very important |
| {font-size : 2.25em; /* will display at 36px */ | | | | component of the sales page. I use a red-dashed |
| }h2 | | | | border for the form. |
| {font-size : 1.5em; /* will display at 24px */ | | | | .purchase-form |
| }h3 | | | | {padding : 1.5em;border : dashed;border-width |
| {font-size : 1.25em; /* will display at 20px */ | | | | :medium;border-color : #FF0000 ;background : |
| }h4 | | | | #fffac6; |
| {font-size : 1.125em; /* will display at 18px */ | | | | } |
| }table.sales-letter | | | | (12) If you use an image and associate a link with it, |
| {width : 60em;margin-left : auto;margin-right : | | | | you will want to turn off the border or you will get a |
| auto;table-layout : fixed;background : #ffffff; | | | | distracting blue border around the image.a img |
| } | | | | {border : 0; |
| The body code above sets the default for the | | | | } |
| document's font size to 62.5% of 16px or 10px (px | | | | After all CSS styling has been applied, the sales page |
| = pixels). This is too small for my sales page, and I | | | | now has some "snap" and "pop". The colorful headline |
| adjust it in the #main_content section. The CSS | | | | immediately catches the attention of even a casual |
| body code also sets the font color to black, the line | | | | web surfer. The sales message contained in the sales |
| spacing to normal, the font family to sans-serif (with | | | | page is now easy to read and much easier to |
| Verdana as the first choice), and specifies a blue | | | | understand. The well-crafted content-display makes it |
| background image used for the body background. | | | | possible for the sales message to be absorbed with |
| I use the #main_content code to set the actual base | | | | just a rapid page scan. After a preliminary scan, an |
| font size I use for the sales page text. All other font | | | | interested reader will more than likely re-read the |
| sizes in the sales page are sized relative to this base. | | | | page for the details. |