层叠样式表

包含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進位的色彩值）、盒尺寸縮寫、邊框縮寫、背景縮寫和文字縮寫。