當瀏覽器中讀取的樣式表，它將根據在樣式表中的信息格式化HTML文檔。
三種方法將CSS
有插入樣式表的三種方法：
外部樣式表
隨著外部樣式表，你可以改變整個網站的改變只是一個文件中的樣子！
每個頁面必須包括對內部外部的樣式表文件的引用<link>元素。 在<link>元素進入裡面<head>部分：
外部樣式表可以寫在任何文本編輯器。 該文件不應包含任何HTML標記。 樣式表文件必須保存一個.css擴展名。
這裡是如何"myStyle.css"的樣子：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | 不要加空格的屬性值和單位之間（如margin-left:20 px; ）。 正確的方法是： margin-left:20px; |
|---|
內部樣式表
如果一個頁面具有獨特的風格，可以使用內部樣式表。
內部樣式的中定義<style>元素，裡面的<head> HTML頁面的部分：
例
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> 試一試» 內聯樣式
內嵌樣式可用於應用了獨特的風格的一個元素。
要使用內聯樣式，樣式屬性添加到相關元素。 樣式屬性可以包含任何CSS屬性。
下面的例子演示了如何改變顏色和左邊緣<h1>元素：
| 內嵌式失去許多的樣式表的優點（通過混合呈現內容）。 謹慎使用此方法！ |
|---|
多個樣式表
如果一些性質已被用於在不同的樣式表相同的選擇器（元件）所定義，將用於從上一次讀取的樣式表中的值。
例
假設外部樣式表有以下樣式為<h1>元素：
h1
{
color: navy;
}那麼，假設一個內部樣式表還具有以下樣式的<h1>元素：
h1
{
color: orange;
}如果內部風格是鏈接到外部樣式表後的定義， <h1>元素將是"orange" ：
例
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> 試一試» 但是，如果內部樣式是鏈接到外部樣式表前定義的<h1>元素將是"navy" ：
例
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 試一試» 層疊順序
當有一個HTML元素不止一個樣式指定什麼風格將被使用？
一般來說，我們可以說，所有的風格將“連帶”到一個新的“虛擬”的風格由以下規則，其中排名第一的具有最高優先級表：
- 內嵌樣式（在HTML元素內）
- 外部和內部樣式表（head部分）
- 瀏覽器默認
因此，內聯樣式（特定HTML元素內）具有最高優先級，這意味著它會覆蓋中定義的風格<head>標籤，或在外部樣式表，或瀏覽器的默認值。