层叠样式表

包含CSS的XHTML文件示例

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"><head>
    <style type="text/css">
    body{
        background:#fff;
        color:#777;
    }
    h1{
        font:bold italic sans-serif;
        color:green;
    }
    </style></head><body>
    <h1>这个句子用綠色、粗体和斜体字显示</h1>
    <p>普通字。</p>
    <h1 style="color:red; background:green;">
    这个句子用大的、红色斜体字在绿色背景上显示，通用的h1样式在这里被取代了。
    </h1>
    <h1 style="color: green;"><strong><em>这个句子用綠色、粗体和斜体字显示</em></strong></h1></body></html>

选择器

要针对没有标签定义范围进行样式设置时，可利用<div>与<span>标签
CSS里现在共有5种基本选择器（Basic Selectors）和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。

选择器使用示例

例子：
p{
    font-size: 110%;
    font-family: garamond, sans-serif;}h2{
    color: red;
    background: white;}.highlight{
    color: red;
    background: yellow;
    font-weight: bold;}
在这个例子中有三个选择器：p、h2和.highlight，color: red是一个定义，其中color是属性，red是color的值。
在这里HTML中的结构P（段落）和H2（2级标题）获得了不同的样式。每个段落的字体的大小比包含这个段落的结构的字体的大小要大10%，其字形是Garamond，假如Garamond没有的话那么使用一般的sans-serif字形。2级标题的字用红色，底面是白色的。这个例子中的第三个规则规定了一个class的样式。通过class属性每个HTML结构都可以被指定为这个class，例如：
<P class="highlight">這個段落將被顯示為黃底紅字粗體。</P>

显示为
这个段落将被显示为黄底红字粗体。
除使用<style>之外，也可于HTML内直接使用style="/*CSS在這裡*/"︰
<p style="color:red; background:yellow; font-weight:bold;">
    這個段落同樣會被顯示為黃底紅字粗體。
</p>

其它选择器

CSS中还提供了伪元素选择器和虚拟类别选择器，但用途单一一些，常与其它选择器组合在一起使用。伪元素的元素主要用于选取与另一个选择器选中对象临近的元素。虚拟类别选择器用于选中处于特定状态或具有特定性质的元素。

特殊性优先原则

特殊性优先原则是最重要的优先级比较规则。当引起冲突的2种规则的特殊性存在差异时（例如一个是通过ID选择器指定样式，另一个是通过class选择器指定样式），引擎将优先采用特殊性更高的样式。规则的特殊性的比较是最优先的。如果能直接判断出特殊性的差异，就无需考虑其它规则了。

靠后者优先原则

当权重比较仍然不能分出优先级胜负时，最后就是把守关底的“靠后优先”的原则了，也就是后定义的样式优先级较高。如果起冲突的规则来源相同，而且得分也相同，那么最后的冲突解决法则就是看CSS代码出现的先后顺序。后出现的规则会覆盖掉与之优先级相当的先出现的规则。也可称作“后发制人”、“后来者居上”或“后浪推前浪”原则，随便你怎么称呼。这种原则的适用情形很常见，所以此规则也很重要。

包含块、定位

包含块是CSS定位属性所依托的理论模型。

层次与层叠上下文

层叠上下文规则决定了当有网页元素位置发生部分重合时，重合部分的上下叠放次序。层叠上下文规则详细规定了当浮动、定位以及z轴数值同时出现时，元素叠放次序的总规则。

其它

CSS档内也可以包含注释，注释放在/*和*/之间。一般的浏览器也识别以双斜杠(//)开头的这种注释，但是这是不规范的做法。

早期样式表的历史

HTML规范虽然规定了网页中的标题、段落应该使用的标签，但是没有涉及这些内容应该以何种样式(比如大小、位置、间距、缩进等属性)呈现在浏览器中。从1990年代初HTML被发明开始，样式表就以各种形式出现了。不同的浏览器结合了它们各自的样式语言，读者(也就是浏览网页的用户)可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。
1993年，Robert Raisch提出了一种名为“RRP”的样式规则建议。但这个RRP只允许网页使用1个样式表，不像现在的CSS能支持同时加载多个。不久后出现的Mosaic浏览器就采用增加新种类的HTML标签实现样式的表达，以满足设计师的要求，这也与现在的CSS设计原则不符。随着HTML自带的样式功能的增加，外来定义样式的语言逐渐减弱了。1993年发布的这个Mosaic浏览器是第一款用户界面，并支持书签、图标按钮和图片显示。之前的浏览器都是纯文字浏览器。即使在今天，只使用操作系统命令行自带的Telnet命令，也可以查看网页的源代码。
后来，台湾人魏培源开发的ViolaWWW浏览器使用了一种规则具有层次嵌套性的样式表，并第1个支持通过<link>标签引用外部样式表。FOSI最早支持以相对尺寸值来表示字体大小。函数式风格的DSSSL语言支持在样式表中进行定义变量、继承变量、定义函数等功能，但是语法复杂。1994年，万维网之父蒂姆·伯纳斯-李在欧美众多高能物理研究者和技术人员的支持下，于美国麻省理工学院创立了万维网联盟（W3C），其职责是提供网络标准化建议。1994年，Håkon W Lie提出层叠HTML样式表（Cascading HTML Style Sheets，CHSS）。CHSS既支持用户自定义样式表，也支持网页作者样式表，而且可以满足不同规则以百分比的方式组合使用。它的权重规则计算方式不够直观，当不同规则混合时会得到什么实际效果并不容易从代码中看出。1996年，出现了与CSS语法很像的表现指明语言（Presentation Specification Language，简称"PSL 96"）。PSL 96除表达样式外，也支持条件判断等功能，还可根据对浏览器信息的判断来使用不同的样式，但未获得青睐。

CSS的诞生与发展

1994年，哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。哈肯·莱于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈肯、波斯和其他一些人（比如微软的托马斯·里尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月，哈肯·莱与伯特·波斯发布了CSS规范的第1个版本。这也成了哈肯·莱的博士论文的一部分。当时已有的主流浏览器的内核架构完全不适合解析CSS的语法，加上早年设计师滥用HTML标签来表达样式(这导致“标签汤”(tagsoup)这一骂名的出现)、且漠不关心代码校验，所以CSS等到几年之后才流行起来。1998年，浏览器市场份额被微软公司的Internet Explorer 4和网景公司的Netscape Navigator 4两大浏览器巨头所占据。CSS出现后，微软的IE浏览器走在了逐步实现CSS第1版标准的前列。但是因为不重视问题修补，导致遗留Bug很多，这也使得IE浏览器长期为人们诟病。网景则把重心放在了网页脚本语言的开发上，但很快被微软模仿。网景在90年代末和微软展开的浏览器大战中最终一败涂地，走向破产边缘，但网景也成功推出了日后广泛流行于网页设计中的JavaScript语言。浏览器大战使得网页设计人员深受其害，因为不同浏览器支持的语法规则不太一样，网页设计人员不得不为IE浏览器和网景浏览器的浏览器分别设计一套网页。新成立的民间设计人员团体“网页标准计划”(WaSP)发动水军将W3C的建议宣扬为标准，并批评还未加盟W3C标准的业界厂商。
1997年初，W3C组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第1版中没有涉及到的问题，其结果是1998年5月出版的第2版规则。网页标准计划的7位成员成立了“CSS武士团”（CSS Samurai），指出Opera浏览器和IE浏览器在支持CSS方面存在的诸多问题。Opera公司着手解决了问题，但微软并未解决。网页标准计划也积极劝说网景公司和Macromedia公司分别改进其产品对CSS标准的支持。2003年，Dave Shea推出了一个名为“CSS禅意花园”("CSS Zen Garden")的站点，向人们展示出仅通过应用不同页面样式规则，就可以实现对网页艺术风格的焕然一新。这个网站在网页设计相关人群中产生了不小影响。
从2006年到2009年，“DIV+CSS”布局逐步取代缺乏灵活性的传统表格布局，无表格网页设计成为网页内容布局的主流方案。此时也出现了一些为了跟风而滥用DIV布局的情况，比如将<h1>和<h2>等本身已有语义的标签也改用<div>标签替代。
CSS3引入的简单动画功能使得CSS也开始涉足以往只应由JavaScript负责的效果交互工作。到2017年为止，第3版规则还未完备。

CSS3

CSS3标准已部分公布，但仍未全部制订完毕，还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展。
CSS3分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已经开始制订。直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。
CSS3里增加了不少功能，如：“border-radius”、“text-shadow”、“transform”以及“transition”。CSS3亦支持动画（animation）及立体（preserved-3d）。
部分属性（例如旋转类属性（如：transform），动画类属性，立体类属性），由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分。

CSS4

W3C于2011年9月29日开始了设计CSS4。直至现时只有极少数的功能被部分网页浏览器支持，如使用在HTML而非SVG上的pointer-events。
CSS4增加了一些更方便的选择器，并简化了一些现有选择器的用法。

采纳的困难

浏览器内核主要负责解析网页内容样式以及进行脚本处理（现在分别由浏览器内部的页面渲染引擎和JavaScript引擎分工）。其中页面渲染就是正确识别出CSS代码并在窗口中显示出对应的内容样式。开发一个可支持CSS语法解析的浏览器并非易事，CSS规则繁杂，尤其是需要考虑不同的CSS规则之间会存在相互影响的问题。自从Mozilla基金会将Gecko排版引擎单独发布后，现在有众多浏览器厂商采用由第三方发布的页面渲染引擎，独立开发新页面渲染引擎的机构很少。
首先是标准实现程度的问题。尽管CSS1标准在1996年就制订完成了，但一直到3年后还没有一个浏览器实现了其中的全部语法规则。上市的各个浏览器都只是实现了对一部分规则的支持。2000年3月，由微软在麦金塔计算机平台上发布的5.0版Internet Explorer (IE)是第1个全部实现CSS1的浏览器。此后许多其他浏览器也实现了CSS1和CSS2的一部分。但到2004年为止还没有一个浏览器实现了全部CSS2规则。尤其aural和paged等特性是被支持得最差的。
其次，支持某种特性，不代表用起来就没有问题。旧IE版本就以Bug多而闻名。其中声名狼藉的IE 6存在元素堆叠Bug、幽灵字符，方块神秘消失等稀奇古怪的设计缺陷。微软自从在第1轮浏览器大战中胜出后，就依仗独霸市场的优势，轻视修补IE Bug的呼声，导致其市场份额后来又逐渐被其它浏览器蚕食，产生第2轮浏览器大战。
另外还有代码跨浏览器兼容性的问题。“能够在任何浏览器中显示”并不意味着“在任何一个浏览器中显示的效果相同”。即使是彻底实现了CSS1的浏览器也遇到了许多困难。许多CSS的实现机制互相矛盾、有错或有其它稀奇古怪的地方。为了使他们的页面在任意系统上的任意浏览器中的显示效果一致，网页作者往往要被迫写出繁琐的代码或使用各种奇技淫巧。一个最著名的错误涉及到显示方形的宽度，在IE浏览器中方形的宽度的显示有错误，其结果是方形的宽度在许多浏览器中被正确地显示，但在IE上方形的宽度太窄。虽然这个错误有解决的办法，但它限制了其他一些功能（IE 8.0已经改善方形宽度显示问题）。旧版IE还有与其它浏览器计算方式不一样的方盒模型。

使用语法缩写

使用CSS缩写可以减少CSS文件的大小，并使其更为易读。例如：颜色缩写（缩写16进制的色彩值）、盒尺寸缩写、边框缩写、背景缩写和文字缩写。