通俗一点来说，XSL是XML的原配夫人，而CSS只能算是小妾的角色。但是CSS依然有它的用武之地，下面是通过一个具体的例子来说明CSS在XML中的应用。
做菜先要有原料，这原料就是XML代码，比如我们用XML代码写一封求爱信，把它保存为hzhLove.xml。
＜?xml version="1.0" encoding="GB2312"?＞
＜?xml-stylesheet type="text/css" href="hzhLove.css" ?＞
＜!--DOCTYPE loveletter SYSTEM "hzhLove.dtd" --＞
＜loveletter＞
＜receiver＞仪琳姑娘＜/receiver＞
＜senddate＞2000年1月1日＜/senddate＞
＜sendreason＞再一次阅读了金先生的笑傲江湖＜/sendreason＞
＜topic＞我和仪琳有个约会＜/topic＞
＜content＞
＜para＞
＜mark＞1＜/mark＞
＜title＞引言＜/title＞
＜soul＞表示对仪琳产生相思的原因＜/soul＞
＜keyword＞眼睛、鼻子、头发、三围、气质＜/keyword＞
＜/para＞
＜para＞
＜mark＞2＜/mark＞
＜title＞论述＜/title＞
＜soul＞列举所有酸不垃圾的话直到自己的胃不能承受＜/soul＞
＜keyword＞朝思暮想、朝三暮四、聊胜于无、生生世世、执子之手＜/keyword＞
＜/para＞
＜para＞
＜mark＞3＜/mark＞
＜title＞结论
＜soul＞没有你我的世界会有所不同，实际上原因是要花费时间去追别的女孩＜/soul＞
＜keyword＞女朋友、老婆、情人、一辈子＜/keyword＞
＜/para＞
＜/content＞
＜reference＞
＜article＞追女孩十大秘技＜/article＞
＜article＞网上求友大法＜/article＞
＜article＞三心二意追女法＜/article＞
＜/reference＞
＜/loveletter＞
注意第二行代码＜?xml-stylesheet type="text/css" href="hzhLove.css"?＞，它表示引用的CSS的名称hzhLove.css，hzhLove.css的作用就是对各个标记的显示方式进行定义：
比如 receiver
{
margin-bottom: 10pt;
margin-left: 20;
font-family : "宋体";
font-size : 22pt;
display: block;
}
就表示对标记receiver的显示方式的设定。实际上，CSS在HTML网页设计中的地位是很重要的，它为HTML网页提供了一种聪明的、先进的格式化方法。你可以定义诸如位置、颜色、背景、边空、字体、排版格式等等。
||||||CSS基本格式
定义CSS的基本格式如下：
Selector {property:value; property:value; ...}
下面对这些关键字逐一进行说明：
Selector： 选择符，被施加样式的元素，可以是标记（tag）、类(class)、标识(id)等。 在上面的例子中receiver就是一个Selector。
Property： 样式属性，可以是颜色、字体、背景等等。比如上面例子中的"display"，"font-size"等等。
value： 样式属性取值，决定样式结果。 比如我们取font-size的值为22pt。注意有些属性的取值是一个枚举值，也就是说系统列出了所有你可以取的值，你从中选择一个就是了。比如属性"display",可以取的值有：block,table,table-caption,table-row, table-cell,listitem等等。选择一个你认为合适的，作为一个Selector的属性"dispaly"的值。
如果我们要把para以列表形式显示的话，并对receive,senddate,sendreason,topic等元素进行不同的设置的话，完整的hzhLove.css见下面：
receiver
{
margin-bottom: 10pt;
margin-left: 20;
font-family : "宋体";
font-size : 22pt;
display: block;
}
senddate
{
margin-bottom: 10pt;
margin-left: 20;
font-family : "宋体";
font-size : 8pt;
display: block;
}
sendreason
{
margin-bottom: 10pt;
margin-left: 20;
font-family : "黑体";
font-size : 10pt;
display: block;
}
topic
{
margin-bottom: 10pt;
margin-left: 20;
font-family : "仿宋体";
font-size : 10pt;
display: block;
}
content
{
display: table-caption;
padding:25px;
}
para
{
display: table-row;
}
mark,title,soul,keyword
{
display:table-cell;
padding:5px;
}
mark
{
color:red;
font-weight:bold;
}
title,soul,keyword
{
color:black;
}
article
{
display: block;
}
把hzhLove.xml和hzhLove.css放在同一个目录下，用浏览器NetScape的升级版本Mozilla观看hzhLove.xml文档你就会得到定制的显示效果，而不是死板的一棵树状的表示。这里需要注意的一点是在IE对CSS2的支持不完全，而且不支持用中文作为CSS的标记的名称，也就是说IE对XML的CSS支持还不是很好，所以你用IE浏览器的话，是不会看到你所希望的定制效果的，我们只好等待新的IE6.0或者是改用其他对CSS支持良好的浏览器（比如大名鼎鼎的NetScape）。当然如果你非用IE的话，一个解决方法就是不用CSS来装饰XML，改用XSL，这就是我们下面要讲述的专题。