CSS(Cascading Style Sheets)是一種描述HTML文件風格樣式的語言，CSS描述了HTML元素應如何顯示，例如要讓某一個段落文字置中對齊，可以在元素中加入style屬性如下：
<p style="text-align:center">這段文字會置中對齊</p>
不過若是每個段落都要加入style屬性，便會很沒效率，也很難維護。在CSS中，可以透過選擇器的方式來設定樣式，例如上述的例子可改爲：
<style>
p { text-align:center; }
</style>
<p>這段文字會置中對齊</p>
<p>這段文字也會置中對齊</p>
其中<style>中的 p 即爲選擇器，可篩選出文件所有的<p> 元素，因此便不需要個別加入style 屬性。另外若將<style>區塊獨立放在外部的樣式檔案(.css)，便可以在不同的網頁之間共用樣式，也因此只需更改一分CSS文件，便可以控制整個網站的佈局及樣式，可以節省了大量的建置及維護時間。
CSS語法由一個選擇器和一個聲明區塊組成，例如：
h1 {
color: green;
text-align: center;
}
樣式的語法為：
選擇器 {
屬性: 屬性值;
屬性: 屬性值;
}
在html文件，CSS要放在<style> 標籤中，範例程式及執行結果如下：
<html>
<style>
p {
color: green;
text-align: center;
}
</style>
<p>CSS 樣式</p>
</html>
註解用於解釋樣式碼，瀏覽器會忽略註解。CSS註解以 / 開頭及 / 結尾，可以跨越多行：
h1 {
/* 這是單行註解 */
color: green;
/* 這是多行
註解 */
text-align: center;
}
類別選擇器選擇特定類別屬性的HTML元素，CSS語法為小數點+類別名稱，例如：
<style>
/* 篩選所有 myClass 類別的元素 */
.myClass {
color: green;
text-align: center;
}
</style>
<div class="myClass">類別選擇器</div>
<div class="myClass">類別選擇器</div>
id選擇器使用HTML元素的id屬性來篩選特定元素，一般元素的id是唯一的，因此id選擇器可用於篩選出唯一元素，其語法為＃號+id，例如：
<style>
/* 篩選 myDiv 的元素 */
#myDiv {
color: green;
text-align: center;
}
</style>
<div id="myDiv">ID 選擇器</div>
此選擇器乃根據元素的屬性值來選擇元素。
<style>
/*篩選有title屬性的div元素*/
div[title] {
color: blue;
}
</style>
<div title="">有 Title 屬性</div>
<div>無 Title 屬性</div>
選擇器群組可以將具有相同樣式定義的選擇器結合成群組，可以有效的減少程式碼。進行群組時，以逗號分隔選擇器。
以下CSS選擇器具有共通的樣式定義：
h1 {
color: green;
text-align: center;
}
p {
color: green;
text-align: center;
}
div {
color: green;
text-align: center;
font-weight:bold;
}
共通的樣式可以簡化為選擇器群組：
h1, p, div {
color: green;
text-align: center;
}
div {
font-weight:bold;
}
子選擇器與後代選擇器相似，但必須是直屬的父子關係(不可以是父孫關係)，下面的範例選擇了myDiv元素內所有的第一代<p>元素：
<style>
/* 選到 myDiv 内的第一代 p 元素 */
#myDiv > p {
background-color: lightblue;
}
</style>
<div id="myDiv">
<p>div 内的第一代段落</p>
<section>
<p>div 内的第二代段落</p>
</section>
<p>div 内的第一代段落</p>
</div>
<p>myDiv外的段落</p>
同級選擇器會選擇到同一階層的元素，下面的範例選擇了與div元素同一階層的所有<p>元素：
<style>
div ~ p {
background-color: lightblue;
}
</style>
<div>
<p>第二階層的段落</p>
</div>
<p>與div同階層的段落</p>
緊鄰同級選擇器會選擇到同一階層且緊隨其後的元素，下面的範例選擇了與div元素同一階層的緊隨段落元素：
<style>
div + p {
background-color: lightblue;
}
</style>
<div>
<p>第二階層的段落</p>
</div>
<p>與div同階層且緊隨其後的段落</p>
<p>與div同階層的段落</p>
樣式插入在元素的style屬性中，為特定元素的唯一樣式，最大缺點是不容易維護。
<div style="background-color: lightblue;">本段落採用内嵌式樣式</div>
結合選擇器，將樣式放在<style>元素中：
<style>
#myDiv {
background-color: lightblue;
}
</style>
<p id="myDiv">本段落採用内部樣式</p>
可以將上個例子的樣式儲存為外部樣式檔，例如 myStyle.css 内容如下：
#myDiv {
background-color: lightblue;
}
然後在透過 <link> 指令載入，便可以得到相同的結果：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
<p id="myDiv">本段落採用外部樣式</p>
</body>
</html>
<div style="color:blue;">樂活學程式</div>
<div style="background-color:lightgreen;">樂活學程式</div>
<div style="color:rgb(0,0,255);">樂活學程式</div>
<div style="background-color:rgb(255,255,0);">樂活學程式</div>
rgb(紅色, 綠色, 藍色) 的設定可以透過6碼的16進位簡化為： #rrggbb，例如
rgb(0, 0, 255) 可簡化為 #0000ff
rgb(255, 0, 255) 可簡化為 #ff00ff
rgb(245, 0, 245) 可簡化為 #f500f5
<div style="color:#0000ff;">樂活學程式</div>
<div style="background-color:#f500f5;">樂活學程式</div>
RGBA顏色值是RGB顏色值加上顏色的不透明度。 RGB顏色值指定為：rgb(紅色, 綠色, 藍色, 不透明度)，不透明度介於0(完全透明)到 1(完全不透明)之間，例如，rgb(0, 0, 255, 0.5)呈現為半透明的藍色。
<div style="color:rgb(0,0,255,0.5);">樂活學程式</div>
<div style="background-color:rgb(255,255,0, 0.25);">樂活學程式</div>
rgb(紅色, 綠色, 藍色, 不透明度) 的設定可以透過8碼的16進位簡化為： #rrggbbaa，例如
rgb(0, 0, 255, 0.5) 可簡化為 #0000ff80
rgb(245, 0, 245, 0.25) 可簡化為 #f500f540
<div style="color:#0000ff80;">樂活學程式</div>
<div style="background-color:#f500f540;">樂活學程式</div>
| 樣式 | 説明 |
|---|---|
| color | 文字顏色 |
| text-align | 文字對齊 |
| Font-family | 文字字體 |
| font-size | 字體大小 |
| font-weight | 字體粗細 |
| font-style | 斜體樣式 |
| 範例 | 結果 |
|---|---|
| <p style="color:blue">樂活</p> | 樂活 |
| <p style="text-align:right">樂活</p> | 樂活 |
| <p style="Font-family:'標楷體' ">樂活</p> | 樂活 |
| <p style="font-size:xx-small">樂活</p> | 樂活 |
| <p style="font-weight:bold">樂活</p> | 樂活 |
| <p style="font-style:italic">樂活</p> | 樂活 |
<p style="color:blue;">樂活學程式</p>
text-align屬性用於設置文字的水平對齊方式，可以分為置左對齊或置右對齊，置中或分散對齊。
| 屬性值 | 説明 |
|---|---|
| left | 置左對齊 |
| center | 置中對齊 |
| right | 置右對齊 |
| justify | 分散對齊 |
| 範例 | 結果 |
|---|---|
| <p style="text-align:left">樂活</p> | 樂活 |
| <p style="text-align:center">樂活</p> | 樂活 |
| <p style="text-align:right ">樂活</p> | 樂活 |
| <p style="text-align:justify">樂活</p> | Love Coding |
text-decoration屬性用於設置或刪除文字的劃線。
<style>
/* 去除超鏈結的底線 */
a {
text-decoration: none;
}
/* 段落加上底線 */
p {
text-decoration: underline;
}
</style>
<a href="#">無底線的鏈結</a>
<div>段落加上底線</div>
| 屬性數值 | 説明 |
|---|---|
| background-color | 背景顔色 |
| background-image | 背景的圖像 |
| background-repeat | 重複背景 |
| background-position | 背景圖像位置 |
| background-attachment | 背景圖像滾動或固定 |
<style>
div {
background-color: lightblue;
}
p {
background-color: lightgreen;
}
</style>
<div>
藍色背景的Div
<p>綠色背景的段落</p>
藍色背景的Div
</div>
| 屬性值 | 説明 | 預設值 |
|---|---|---|
| border-width | 邊框的寬度 | medium |
| border-style | 邊框的樣式 | none |
| border-color | 邊框的顏色 | 文字的顏色 |
| border | 一次設置上列邊框屬性 | |
| border-radius | 邊框的圓角 | 0 |
<style>
div {
border-style: solid;
border-width: 5px;
border-color: red;
}
</style>
<div>紅色粗框</div>
以上的樣式可以用 border 簡化為：
div {
border: solid 5px red;
}
如下例中的黃色區域即爲 id="pad_1" 元素的 padding，淺藍色為 margin。
<style>
#pad_1 {
padding: 20px;
margin:20px;
background-color: yellow;
border: solid 1px black;
}
#pad {
border: solid 1px lightgray;
}
#pad{
background-color: lightcyan;
}
#pad_1 div {
background-color: white;
}
</style>
<div id="pad">
<div id="pad_1">
<div>
黃色爲 pad_1 的 padding<br>
淺藍色為 pad_1 的 margin。
</div>
</div>
</div>