#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}

我们定义了它的宽度并具给它的左边一个15像素的空白，以防止它贴到左边上，同时留一些额外的空当在顶部，这个favlinks容器的宽不像我们的导航栏的宽度178那样，而是163，是因为我们添加了15像素的左空白。这叫做盒式结构，更精细的内容可以看这篇文章：3D by Jon Hicks
以下内容为程序代码

#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}

上面的这段CSS是我们的这个标题的样式，前两行是定义文字字体大小和颜色的，再往下是padding 和 margin，我们只在底部添了10像素的空白，padding 和 margin是必需的，除非我们不想要在标题和链接之间空太开间隔，只是一些空开就够了，对我来说那就是10个像素了在底部。
以下内容为程序代码

#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}

在上面的这些代码是定义我们的列表中的链接的，首要的是确保默认的点不显示出来，并且padding 和 margin是设置到零的。就像我们在第五部分中的导航栏一样。
以下内容为程序代码

ul.extlinks li {
background: url(images/bullet_extlink.gif) no-repeat 0 3px;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
}

我们已经添加了一个名为“extlinks”的Class来定义我们的链接，我们用“ul.extlinks li”来定义ul里的“li”标签的样式。首先我们添加一个non-repeated背景，定义我们的小点距上顶3像素，距左边0像素来确保这些点正好对齐我们一会要添加的链接。我们定义了字体样式并添加了一点左侧空白来确呆我们的文本能给我们的点留出一些空白。
以下内容为程序代码

.extlinks a:link {
color: #A5003B;
text-decoration: none;
border-bottom: 1px dotted #A5003B;
}

.extlinks a:visited {
color: #6F2D47;
text-decoration: none;
border-bottom: 1px dotted #959E79;
}

.extlinks a:hover {
background-color: #C3C9B1;
color: #A5003B;
text-decoration: none;
border-bottom: 1px solid #A5003B;
}

在最后我们定义我们的链接的一些其它样式，当鼠标经过链接时，链接出现一个1像素高度的下划线，为了不出现两条下载线，我们通过添加“text-decoration: none”隐藏了标准的默认的那条下划线，字体样式就不用添加了，因为我们已经定义了li标签的样式，我们仍然需要添加一个背景颜色当鼠标经过状态的时候，并要为访问过的链接定义一个更浅一点儿的颜色，让其下划线变为虚线。这样别人就知道哪些链接是点过的了！
这是最后的结果
建立外部样式文件

现在我们已经完成了我们的设计，但是你注意到我们所有的CSS样式都是写在我们的网页内的，而你们在实际做的过程中尽量不要这样，在这里我是为了简单方便的讲解才这样的，你们应该把你们的样式单写在一个单独的外部的样式文件里，然后链接它到你的文档里。所以我们现在要拷贝所有的样式并把它们粘贴到一个新的文件里，保存为“styles.css”

链接样式文件
以下内容为程序代码

<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />

这里就是最终最终的成品了

现在我们的的系列教程就全部讲完了，我很想知道大家在学习过程中的感受，并希望大家能为我指出文中的一些不足，同时也希望大家学完以后设计出自己的文档拿来这里一起展示一样，希望你乐意哟!