B. The CSS
1. Defining the HTML <body>
Be sure to read Creating a sales page with HTML and CSS (part A) before you read this one.
We first start by creating a new document and saving it as styles.css in the same folder as our index.html.
With CSS, we can customize the look of any HTML tag including the <html> and <body> tags.
Time to dive into CSS. Let’s give our HTML body some definition.
body {
background-color: #f8f8ec;
font-size: 10px;
line-height: 20px;
font-family: Tahoma, "Tahoma Bold";
color: #000000;
}
What I’m defining in the body tag is the universal font size, font color, the height between each line, and the background color of my document. Unless somewhere else in my CSS I change these properties, they will remain as defined in the body tag.
Let’s quickly take a look at the syntax.
To define any existing tag (i.e. that is native to HTML, that we didn’t “invent”), simply write out the name of the tag, in this case body. Then notice that all styling is enclosed between two braces { and }. When you start defining a new div or tag, put the tagname and right away the two braces as follows:
tagname {
}
Then fill in with the styling. This way you’ll be sure to have your braces in place, and you’ll avoid mistakes.
Next, we have the CSS properties and their values following this syntax:
property: value;
So property, colon, value, semi-colon. Never forget the semi-colon at the end! 
Now we have:
tagname {
property: value;
}
To write comments in CSS use /* and */.
For example,
/*background:#999999;*/
This will simply deactivate that property and you’ll be able to compare what the page looks like without it.
2. Defining the container div
div#container {
width: 722px;
background-color: #FFFFFF;
margin: 0px auto;
border: #e7b917 2px solid;
}
I want the width of the white area, where my text is gonna be, 722px; I want the background to be white (#FFFFFF). I also want the container to be centered on the page, no matter how big the computer screen of the viewer is, so I define its margins as 0 auto. And last but not least I want an orange, 2 pixel solid border around my container.
Notice that all IDs are defined by the # sign. The classes on the other hand are defined by a dot. So if our container was a class, I’d use .container{}
The syntax for IDs is
div#idname{
property: value;
}
or simply
#idname{
property: value;
}
3. Defining the headings
h1 {
font-size:25px;
font-weight: bold;
color: #CC0000;
text-align:center;
line-height:30px;
width:600px;
}
h2 {
font-weight: bold;
color: #CC0000;
line-height:30px;
font-size:20px;
width:550px;
line-height:21px;
text-align:center;
}
h3 {
font-weight: bold;
color: #CC0000;
line-height:32px;
font-size:16px;
width:550px;
padding-left:50px;
}
This is pretty straight forward. We’re basically changing the font size and color, the distance between each line (line-height) and we’re bolding and centering the text and assigning a maximum width.
4.List item definition
ul {
margin-left:100px;
width:450px;
font-size:14px;
}
margin-left:100px; simply centers my list in the container.
If you want to put a custom image instead of a bullet, use this CSS property
list-style-image: url(images/customBullet.gif);
5.Defining the testimonial paragraphs
div#testimonial p{
width:500px;
padding:20px;
height:auto;
border:#FF0000 dashed;
background:#FFFF99;
}
Here we’re defining the testimonial paragraph to have a different background color than the container, and it’s surrounded by a dashed border.
If you have more than one testimonial paragraph, using a class would be preferable (div classes vs ids is explained in Part A). In your HTML simply replace <div id="testimonial"> by <div>
.testimonial p{
width:500px;
padding:20px;
height:auto;
border:#FF0000 dashed;
background:#FFFF99;
}
6. Let’s not forget to define our YELLOW HIGHLIGHT!
.yellowHighlight{
background-color:#FFFF00;
}
All this does is add a yellow background to a word or a group of words of your choice!
7. Guarantee
#guarantee{
background: url(images/certificate.gif) no-repeat;
width: 526px;
height: 418px;
}
We can also customize the paragraph and heading styles like this:
#guarantee p{
width:420px;
padding-top:50px;
font-size:16px;
padding-left:50px;
}
And the headings:
#guarantee h1 {
font-size:36px;
color: #000; /*black*/
}
The last thing we need to do is to link the CSS file to the HTML files.
Open your index.html file, and add this piece of code between <head> and </head> tags.
<link href="styles.css" rel="stylesheet" type="text/css" />
>>> DOWNLOAD
I prepared a ZIP files that you can download. It includes the styles.css and index.html files. Just for fun I included an automatic date javaScript code in the HTML file and other goodies. Click on the download button below to get it.
Please comment on the download
