Free-Reprint Article Written by: Elizabeth Adams See Terms of Reprint Below.
***************************************************************** * * This email is being delivered directly to members of the group: * * [email protected] * ***************************************************************** We have moved our TERMS OF REPRINT to the end of the article. Be certain to read our TERMS OF REPRINT and honor our TERMS OF REPRINT when you use this article. Thank you. This article has been distributed by: http://Article-Distribution.com Helpful Link: The Digital Millennium Copyright Act - Overview http://www.gseis.ucla.edu/iclp/dmca1.htm --------------------------------------------------------------------- Article Title: ============== Sales Pages With Style - Create Quality Sales Pages With CSS Article Description: ==================== Sales pages, to be effective, must immediately catch the attention of even a casual web surfer. The sales message contained in the sales page needs to be both easy to read and understand. If the content-display styling is well-crafted, the sales message can be absorbed with just a rapid page scan. An interested reader will re-read the page for the details. CSS is a web design tool that will help you carry your reader from your headline to your Buy Now button, and in this article, we will show you how to build CSS pages. Additional Article Information: =============================== 1734 Words; formatted to 65 Characters per Line Distribution Date and Time: 2008-04-15 10:36:00 Written By: Elizabeth Adams Copyright: 2008 Contact Email: mailto:[EMAIL PROTECTED] Elizabeth Adams's Picture URL: http://www.elizabethadamsdirect.com/greatheadlines/images/elizabeth.jpg For more free-reprint articles by Elizabeth Adams, please visit: http://www.thePhantomWriters.com/recent/author/elizabeth-adams.html ============================================= Special Notice For Publishers and Webmasters: ============================================= If you use this article on your website or in your ezine, We Want To Know About It. Use the following URL to let us know where you have used this article, and we will include a link to your website on thePhantomWriters.com: http://thephantomwriters.com/notify.php?id=5887&p=load HTML Copy-and-Paste and TEXT Copy-and-Paste Versions Of Article Are Available at: http://thePhantomWriters.com/free_content/db/a/sales-pages-with-css.shtml#get_code --------------------------------------------------------------------- Sales Pages With Style - Create Quality Sales Pages With CSS Copyright (c) 2008 Elizabeth Adams Elizabeth Adams Direct http://www.elizabethadamsdirect.com Sales pages, to be effective, must immediately catch the attention of even a casual web surfer. The sales message contained in the sales page needs to be both easy to read and understand. If the content-display styling is well-crafted, the sales message can be absorbed with 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 copywriter from initial concerns about page formatting. Using very basic HTML code, such as that allowed for submissions to ezinearticles, the page content can be written with any basic text editor without concern for special content formatting. Before any CSS styling has been applied, the sales page would not convert any prospects. At this stage, the HTML document contains all of the "content" that will be used. Text and images will typically be positioned on the page in roughly the order these elements will be used in the final sales page. CSS will make everything "pop" and "sizzle" when it is applied to the page. 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, contained in separate CSS text file, for browser display. A previous article of mine, published at ezinearticles, explains how the HTML content gets linked to the CSS file. 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 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. 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 text 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 : Specify the image URL here; } #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 (px = pixels). This is too small for my sales page, and I adjust it in the #main_content section. The CSS 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 (1024 x 768 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 changing 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. After the global formatting is applied page now has some nice-appearing structure.The content now lies between attractive borders and the content is contained on a "page" with adequate margins and on a background of choice. Below are 12 additional tips, including the CSS code, you can use to stylize specific elements and text in your sales pages. (1) I want my headline to be big, bold, red, and centered. Here is the CSS code I use: h1.headline { line-height : 1.5; color : #cc0000; text-align : center; } (2) I use a smaller, blue, bold, and centered sub-headline. h2.subheadline { line-height : 1.5; color : #1b356e; text-align : center; } (3) I use a small font size for the spider text and copyright. I position the spider text at the top of the page for the benefit of search engines. #spidertext, #copyright { font-size : 1.2em; } (4) I use CSS code to position my photo so that it "floats" to the right and any text to the left flows around the photo. .photo { float : right; display : inline; } (5) If you want to center section headings and color the text red or blue, here is usable code: h3.red { line-height : 1.5; color : #cc0000; text-align : center; } h4.blue { line-height : 1.5; color : #1b356e; text-align : center; } (6) I change the font type for quotations. Using Courier New sets the quotes apart from normal body text. .quote { font-family : "Courier New", Courier, monospace; } (7) I use an unnumbered list for my benefits list. The list can be customized to use a custom bullet and 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: Specify the image URL here; list-style-type: none; margin-bottom: 1em } (8) You can highlight important text with a yellow background. .highlight { background-color : yellow; } (9) You can emphasize text by making it bold. .bold { font-weight : bold; } .boldred { font-weight : bold; color : #cc0000; } .boldblue { font-weight : bold; color : #0000ff; } (10) I like to make sales-page testimonials special by framing them and using a pastel background for the text. .testimonial { display : block; margin-left : auto; margin-right : auto; background : #fffacc; padding : 1em; border : double; border-width : thick; border-color : #999999; } (11) The purchase form is a very important component of the sales page. I use a red-dashed border for the form. .purchase-form { padding : 1.5em; border : dashed; border-width :medium; border-color : #FF0000 ; background : #fffac6; } (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 all CSS styling has been applied, the sales page now has some "snap" and "pop". The colorful headline immediately catches the attention of even a casual web surfer. The sales message contained in the sales page is now easy to read and much easier to understand. The well-crafted content-display makes it possible for the sales message to be absorbed with just a rapid page scan. After a preliminary scan, an interested reader will more than likely re-read the page for the details. To get a ZIP file of the HTML and CSS files mentioned in this article and that you can use for practice or for your own templates, please visit http://www.elizabethadamsdirect.com A full-color PDF of the article is also available for download. Sample web pages showing the template sales page without CSS applied, with just global CSS applied, and with all CSS applied can be seen at http://www.elizabethadamsdirect.com/template/exhibits.html To look at a "real" sales page that used the CSS techniques discussed in this article, you can visit http://www.elizabethadamsdirect.com/greatheadlines --------------------------------------------------------------------- Elizabeth Adams has been writing direct sales copy since the early 1990's, when she employed several people to handle mailings and product fulfillment for her postcard marketing business. Elizabeth learned in direct mail how to tweak her sales copy on the run and improve her sales conversion by as much as 400% in only one mailing. She learned how to write a great headline and effective sales copy. Get "Great Headlines Instantly" today to learn how to do for yourself what Elizabeth learned in the trenches: http://www.elizabethadamsdirect.com/greatheadlines/ --- END ARTICLE --- Get HTML or TEXT Copy-and-Paste Versions Of This Article at: http://thePhantomWriters.com/free_content/db/a/sales-pages-with-css.shtml#get_code ..................................... TERMS OF REPRINT - Publication Rules (Last Updated: May 11, 2006) Our TERMS OF REPRINT are fully enforcable under the terms of: The Digital Millennium Copyright Act http://thomas.loc.gov/cgi-bin/query/z?c105:H.R.2281.ENR: ..................................... *** Digital Reprint Rights *** * If you publish this article in a website/forum/blog, You Must Set All URL's or Mailto Addresses in the body of the article AND in the Author's Resource Box as Hyperlinks (clickable links). * Links must remain in the form that we published them. Clean links should point to the Author's links without redirects having been inserted into the copy. * You are not allowed to Change or Delete any Words or Links in the Article or Resource Box. Paragraph breaks must be retained with articles. You can change where the paragraph breaks fall, but you cannot eliminate all paragraph breaks as some have chosen to do. * Email Distribution of this article Must be done through Opt-in Email Only. No Unsolicited Commercial Email. * You Are Allowed to format the layout of the article for proper display of the article in your website or in your ezine, so long as you can maintain the author's interests within the article. * You may not use sentences from this article as an input for any software that steals sentences from others in order to build an article with software. The copyright on this article applies to the "WHOLE" article. *** Author Notification *** We ask that you notify the author of publication of his or her work. Elizabeth Adams can be reached at: [EMAIL PROTECTED] *** Print Publication Reprint Rights *** If you desire to publish this article in a PRINT publication, you must contact the author directly for Print Permission at: mailto:[EMAIL PROTECTED] ..................................... If you need help converting this text article for proper hyperlinked placement in your webpage, please use this free tool: http://thephantomwriters.com/link-builder.pl ===================================================================== ABOUT THIS ARTICLE SUBMISSION http://thePhantomWriters.com is a paid article distribution service. thePhantomWriters.com and Article-Distribution.com are owned and operated by Bill Platt of Stillwater, Oklahoma USA. The content of this article is solely the property and opinion of its author, Elizabeth Adams http://www.elizabethadamsdirect.com --------------------------------------------------------------------- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --------------------------------------------------------------------- ------------------------------------ *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* To have your article appear in this distribution list, you must absolutely be a client of thePhantomWriters. We offer a paid article distribution service, and this is one of the more than 60 groups where we submit our client articles. To learn more about our program, visit: http://thePhantomWriters.com/x.pl/tpw/index.htmYahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/thePhantomWriters/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/thePhantomWriters/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
