相信大家都听说过CSS了，CSS是一种样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
①在几乎所有的浏览器上都可以使用。
②以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
③使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
④你可以轻松地控制页面的布局。
⑤你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
尽管CSS有着非常多的优点、容易学习；但是很多人对其望而却步，因为他们适应了Table方式的网页排版，而对CSS+DIV只是尝试性的做过简单的学习或仅仅只是了解，对其用法并非真正接触。
相信我，CSS+DIV比Table更加灵活，同时，非常容易学习，几乎是一学就会。下面，俺带您从最简单的最基本的实例开始学习，让您走出网页排版新方式的第一步。
下面，偶以最灵活最通用的方式来教您如何应用CSS+DIV，即代码分离模式，CSS是单独的代码，与DIV布局对象分离。
启动您的Dreamweaver，新建一个HTML基本页，之后，切换到“代码”编辑模式，然后，如下图一样，编写相应代码即可：
首先，在页面的Head区域，加入CSS代码，尽管这个时候您可能看不懂，不要紧，跟着做即可。
接着，在Body区域，加入一个DIV，将其ID设置为MyDiv；
最后，通过浏览器浏览您的页面，我们就可以看到如下图的一个具有边框的DIV对象了。
是不是呀，挺简单的，但是却非常灵活，由于使用了代码与对象分离模式，只要随便修改，整个效果即随之而改变。
以上的例子是设置DIV的边框线条颜色、类型，这是四条边都设置成同一种风格；如果要修改某个属性，我不知道属性的名称，怎么办呢，不要紧，Dreamweaver会帮助我们，我们要做的、要改的其实就是使用可视化的方式修改即可。
如下图！将某种属性删除，然后输入：(冒号)，这个时候，会弹出属性供我们进行选择。
看到了吧，在弹出的属性选项中进行选择，即可完成。
下面，我们继续研究部分属性；上面的例子是设置DIV边框成统一的风格，如果要修改某个边框为其它类型的，应该如何设置呢，比如设置上边框为虚线？
如下图，上边框就成为虚线了！
在此就不贴图了，直接帖出CSS代码：
<style type="text/css">
<!--
#MyDiv {
width: 66px;/*DIV宽度*/
float:left;/*DIV对齐方式，这里为左对齐*/
border:#A3BFE7;/*边框颜色*/
border:solid;/*边框线条，这里为虚线*/
border-width:1px;/*边框粗细，这里为1个像素*/
border-top:#000000;/*设置顶边的颜色*/
border-top-style:dotted;/*设置顶边线条为虚线*/
border-top-width:1px;/*设置顶边粗细为1像素*/
}
-->
</style>
好了，实例就介绍到这个地方。
至于CSS+DIV的灵活应用，方法还多着呢，当您有了一定的基础，要想得到提高，那也是一件容易的事情。