先建立index.html和css.css两个文件。放在同一目录里
[建议编辑工具用Dreamweaver以后简称DW]
第二步：
在index.html里的<head></head>之间放入
<link href="css.css" rel="stylesheet" type="text/css" />
这段代码是外部CSS调用，注意：href="css.css"这是路径
因为index.html和css.css在同一目录。
第三步：
在css.css文件里编定样式。可以用DW
用DW打开你的css.css → 窗口 → CSS样式 → 一般在你的右边出现CSS样式 → 点全部，下面会出现一个css.css → 点右键选择转到代码，这样在左边出现一个空白的板面这是因为你还没在里面编辑
第四步：
开始编定你要的样式了：
样式分两种
一种是点 . 一种是#号
先说. 如
.abc {}
点开头后面的abc是你自己定义的，为了直观大括号里我没有什么东西是因为只定义了样式名称，内容如高，宽没有定义，这样又回到右边的CSS样式编辑器里
这时在css.css下面出现了一个.abc的名字，你可以双击或右键选择编辑，这样会出现一个对话框。
下面说说对话框里的一些功能
分类：第一个类型是定义字体，大小，一些相关东西，一看就知道了，
第二个是背景不用说了，你一就明白了，
第三个是区块，这个自己研究一下，
第四个是方框，这个就是定义宽和高了，浮动选择一般为左对齐，下面的就是相当于，用table的，填充和间距和
第五个边框，边框，就是定义这个框的边线，大少颜色之类的，自己研究，
其它的，有少复杂，自己用多了就会知道了，
说了这么多，来个例子吧：
从出来对话框说起，
选择第二个，背景为红色[#FF0000]
选择第四个，定义宽为500px，高为300px，浮动为左对齐，点确定。样式如下
.abc {
background-color: #FF0000
width: 500px
height: 300px
float: left
}
样式出来了，接下来就是DIV的调用了，下面是index.html里面：
<html>
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="abc">
</div>
</body>
</html>
上面就可以浏览看出页面有一个500X300的红色块了
class="abc"现在说明一下.和#号了
用.abc就用class="abc"
用#abc就用id="abc"
他们区别就是级别不一样，#号比点要级高，而且#号是唯一的，
先说级别：
如果DIV用#号，定义了字为12号，黑色(ID="abc">)
<div ID="abc">我是真灵无限
</div>
上面的六个字，为12黑色的字，
但是我想要真灵无限四个字为14号，红色(class="123")
这样定成
<div ID="abc">我是<div class="123">真灵无限</div>
</div>
这样是没有用的，因为高级的#已经定义了，字的大小和颜色，所以要反过来，
<div class="abc">我是<div ID="123">真灵无限</div>
</div>
这样才能有效果
再说说#号的唯一性，如果定义了#abc和.123这两个样式
那么ID="abc"在一个页面只能出现一次，
而class="123"可以在多个div里面调用，
这就是id和class的区别！
打了这么多，相信基本的样式可以应用了。
《精通css》《CSS禅意花园》
《CSS权威指南》
《CSS网站布局实录》
《别具光芒》——CSS属性、浏览器兼容与网页布局
《CSS商业网站布局之道》
《CSS与HTML Web设计实践指南》
《CSS Web设计高级教程（第2版）》
《CSS设计彻底研究(部分彩印)》
《HTML+CSS网页设计与布局从入门到精通》
《CSS基础教程》
《CSS网页布局学习笔记》
《css入门经典》
《CSS完全自学手册》
这些都是比较经典书籍
希望能帮助到你
DIV CSS网站布局的八个小技巧：1.若有疑问立即检测。
在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用。请注重，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。
2.使用浮动功能时记得适当清除指令。
浮动是个危险的功能，未必会产生所期望的结果。假如碰到浮动元素延伸到外围容器的边框或者其他不正常情况，先确定的做法是正确的。
3.边界重合时利用padding或border来避免。
可能会为了一点不应该出现的空间而焦头烂额，或者需要一点点空间时，怎样都挤不出来。假如有用到margin，那么很轻易产生边界的重合。
4.DIV CSS网站布局时尝试避免同时对元素指定padding/border以及高度或宽度。
Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但假如母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。
5.DIV CSS网站布局时不要依靠min-width/min-height。
Windows版IE并不支援两种语法。但是在某种程度下，windows版IE可以达到相当于min-width/min-height的效果，所以只要对IE做点过滤功能，即可达到想要的结果。
6.若有疑问，先减少百分比。
有时候某些错误会使50%50%成为100.1%，使网页出现问题。这时请尝试将这些值改为49%，甚至49.9%。
7.记住“TRBL”写法。
DIV CSS网站布局中border，margin与padding的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left.所以margin:01px3px5px的结果是上方无边界，右边1像素，以此类推。记住“TRBL”，就不会弄错次序了。
8.只要不是零的值，都要指定单位。
CSS需要对每个font，margin等各种值指定单位。
