傳統的網頁是採用 HTML 標籤語法來進行撰寫。但是早期受限於瀏覽器的功能，能進行的只有基本的排版。
隨著網路的發展，就制定了 CSS (Cascadeing Style Sheets) 堆疊樣式表 或簡稱「樣式表」來加強網頁在排版及呈現上的能力。
CSS 可以加強原有 HTML 標籤語法命令的功能。也可以透過自訂CSS屬性來加強功能。
教學請詳內文
壹、CSS的使用方式
外連 CSS 檔案
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>讀入一個外部CSS檔案</title>
<link href="sample.css" rel="stylesheet" type="text/css">
</head>
HTML 內含 CSS，使用<style>標籤
<title>HTML 內含 CSS</title>
<style type="text/css">
<!--
body {
color: #ff3300;
background: #ffffff url(p.jpg) no-repeat;
}
h1 {
margin-top: 110px;
margin-right: 80px;
text-align: right;
}
--></style>
貳、CSS 基本語法
選擇器 { 屬性 : 設定值 }
例如
p{color: #ff0000 }
用分號分隔兩個屬性
p{color: #ff0000; background-color: #ffff00 }多行的寫法
p{
color: #ff0000;
background-color: #ffff00
}/* 註解 */
/*
多行
註解
*/
參、自訂 CSS
在 自訂CSS 樣式表檔案中。 分成兩大類
class 屬性 及 id 屬性 兩種寫法
注意名稱請不要使用特殊符號，建議使用英文就好。
.class { }
例如
.sample {
color: #ffffff;
background: #006600;
}<p class="sample">class屬性</p>
#id { }
例如
#sample {
color: #ffffff;
background: #006600;
}<p id="sample">id屬性</p>
肆：設定連結樣式
設定超連結的樣式
未點選超連結
a:link {
color: #339900;
background: #ffffff;
}已點選超連結
a:visited {
color: #999999;
background: #ffffff;
}滑鼠游標移上
a:hover {
color: #ff6600;
background: #ffffff;
}按下滑鼠時
a:active {
color: #ff6600;
background: #ffffff;
}
伍、色彩的指定
是使用 RGB 的16進位碼來表示
例如
#ff0000
#f00 /* 相同於 ff0000 即兩位相同可以只寫一個 */
陸、CSS BOX
CSS 是作用於一個矩形的物件中，稱為「BOX (框盒)」。
由內而外，包含了四個要素 ─ 內容、內距、框線、邊界
它的結構如下圖：
