CSS ( Cascading Style Sheets ) 樣式表用於控制網頁內容的外觀，提供比 HTML 語法更多元化的控制能力，設定網頁的外觀與互動功能。例如可以用像素為單位設定字體大小，以及設定字元間距、行距、段落間距、縮排定位等，讓網頁的版面編排更精確。
CSS 樣式為網頁設計者提供的另一項優點是容易管理，使用 HTML 語法設計網頁是在網頁中設定樣式，若是網站包含數量很多的網頁時，修改樣式將會是一件費時的工作。而 CSS 樣式表允許將樣式儲存在一個外部檔案，只要將網頁連結到外部樣式表，更新樣式時連結到此樣式表的網頁就會同時更新，可以大幅節省網頁維護的時間。
CSS 樣式表依存放的位置，可分為「內部樣式表」與「外部樣式表」，請參閱以下說明：
內部樣式表
內部樣式表又稱為「內嵌樣式表」，將 CSS 規則直接寫在網頁 <head> 檔頭區段的 <style> </style> 標籤
在 Dreamweaver 新增內部 CSS 樣式時，請選擇定義在「只有此文件」。內部樣式表只適用於同一個網頁的內容，但可將內部樣式表轉存為外部樣式表，點選功能表 [ 檔案 > 轉存 > CSS 樣式 ] 即可轉存樣式以供其他網頁使用。
外部樣式表
外部樣式表是將樣式儲存在獨立的外部檔案，並非直接儲存在 HTML 網頁。外部樣式表是獨立的文字檔，網頁使用 head 區段的 <link> 標籤或是 @import 規則連結到外部樣式表。
連結語法 <link rel="stylesheet" href="style.css" type="text/css" / >
外部樣式表可包含多個樣式，並可以讓一到多個網頁連結，使用 Dreamweaver 初次定義外部樣式表時，請選擇「定義在：新增樣式表檔」，稍後定義其他樣式時，即可在下拉選單選擇已儲存的外部樣式表。
您可以套用多個樣式到同一個元素或網頁。例如，您可以建立一個 CSS 規則以套用顏色，然後建立另一個規則以套用邊界，最後將這兩個規則套用到網頁上相同的文字。而定義的樣式會「重疊」於網頁的元素下，最後建立您要的設計。
您可以在 Dreamweaver 中定義下列規則類型：
自訂 CSS 規則也稱為「類別樣式」，可以讓您將樣式屬性套用到任何文字範圍或區塊。所有類別樣式的開頭都是句點 (.)。例如，您可以建立一個類別樣式叫做 .red，將規則的 color 屬性設定為 red，再將樣式套用至已設定樣式之段落文字的一部分。
HTML 標籤規則會重新定義特定標籤 (例如 p 或 h1) 的格式。當您建立或變更 h1 標籤的 CSS 規則時，所有以 h1 標籤格式化的文字都會立即更新。
CSS 選取器規則 (進階樣式) 會為特定元素組合或其他 CSS 允許的選取器形式重新定義格式 (例如每當 h2 標題出現在表格儲存格內時，便會套用選取器 td h2)。進階樣式也會重新定義包含特定 id 屬性之標籤的格式 (例如，由 #myStyle 定義的樣式會套用至內含 id="myStyle" 屬性-值配對的所有標籤)。
建立新的 CSS 樣式表
首先，您會建立一個外部樣式表，內含會定義段落文字樣式的 CSS 規則。當您在外部樣式表中建立樣式時，便可以從中央位置控制多個網頁的外觀，而不必在每個個別網頁上設定樣式。
行內樣式是使用整份 HTML 文件內的特定標籤實體加以定義。例如，<p style="font-size:9px"> 只會為以內含行內樣式之標籤設定格式的段落定義字體大小。
Dreamweaver 會呈現大部分您套用的樣式屬性並在「文件」視窗中顯示它們。您也可以在瀏覽器視窗中預覽文件，查看樣式套用的情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中所呈現出來的不一樣。
附加樣式表
當您將樣式表附加至網頁時，樣式表中所定義的規則會套用至頁面上對應的元素。例如，將 cafe_townsend.css 樣式表附加至 index.html 頁面時，所有的段落文字 (HTML 程式碼中以 <p> 標籤設定格式的文字) 都是根據您定義的 CSS 規則設定格式的。
背景
背景顏色 ( Background-color) ：設定元素的背景顏色。
背景影像 ( Background-image ) ：設定元素的背景影像。
重複 ( Background-repeat ) ：設定背景影像的重複顯示方式。
附件 ( Background-attachment ) ：設定背景影像隨內容捲動或是固定位置。
區塊
單字間距 ( Word-spacing ) ：設定文字元素的單字間距。
字母間距 ( Letter-spacing ) ： 設定文字元素的字元間距。
垂直對齊 ( Vertical-align ) ： 設定文字元素的垂直對齊。
文字對齊 ( Text-align ) ： 設定文字元素的對齊方式。
文字縮排 ( Text-indent ) ： 設定文字元素的第一行縮排。
空白 ( white-space ) ： 設定元素內的空白處理方式。
顯示 ( Display ) ： 設定是否顯示元素，若選擇 none 則隱藏該元素。
方框
寬 ( Width ) 、 高 ( Height ) ：設定元素的寬度與高度。
浮動 ( Float ) ： 。
清除 ( Clear ) ： 。
欄位間隔 ( Padding ) ： 。
邊界 ( Mergin ) ： 。
邊框
設定表格或文字欄位的邊框樣式、寬度、顏色。取消「全部一樣」選項後，即可針對元素的上、下、左、右進行個別設定。
樣式 ( Style ) ： 設定元素的邊框樣式，可選擇實線、虛線、點狀線等樣式。
寬度 ( Width ) ： 設定元素的邊框寬度。
顏色 ( Color ) ： 設定元素的邊框顏色。
清單
用於設定項目類型、項目符號影像與位置。
類型 ( List-style-type ) ： 設定項目符號的外觀。
項目符號影像 ( List-style-image ) ： 設定項目符號的自訂影像。
位置 ( List-style-Position ) ： 設定項目符號的換行與縮排。
定位
類型 ( Position ) ：設定元素在瀏覽器頁面上的位置，可選擇以下類型：
絕對位置 ( absolute ) 。
相對位置 ( relative ) 。
固定 ( fixed ) 。
靜態 ( static ) 。
寬 ( Width ) 、高 ( Height ) ： 。
顯示 ( Visibility ) ： 。
Z 軸 ( Z-Index ) ： 設定元素顯示的前後順序。
溢位 ( Overflow ) ： 設定容器裝載的內容超出範圍時的顯示方式。
置入 ( Placement ) ： 設定元素與瀏覽器邊緣的上下左右距離。
裁切 ( Clip ) ： 設定元素的顯示與裁切區域。
擴充功能
透過 CSS 樣式可以改變滑鼠游標外觀，或者對影像套用特殊效果，注意 Dreamweaver 設計檢視模式下無法預覽，必須儲存後透過瀏覽器檢視網頁。
Dreamweaver 並未提供互動式的編輯工具讓使用者設定視覺效果中的篩選器，使用時請務必自行輸入參數，請參考下方範例。
提示： CSS 樣式中的「篩選器」是由 Filter 這個名詞翻譯而來，Kelvin 老師認為或許改用「效果」或「濾鏡」比較適合。
Blue 模糊效果
filter: Blue:(Add=數值, Director=數值, Strength=數值);
Add: 0, 1, 2
Director: 設定模糊的方向（ 0 度為向上，90 度為向右，180 度為向下，270 度為向左）
Strength: 設定模糊的程度
DropShadow 下落式陰影效果
filter: DropShadow(Color=顏色值, OffX=數值, OffY=數值, Positive=數值);
Color: 設定陰影的顏色，可使用顏色名稱或代碼（例如 Black 或 #000000）
OffX: 設定陰影的水平偏移距離
OffY: 設定垂直偏移距離
Positive: 。
Glow 發光效果
filter: Glow(Color=顏色值, Strength=數值);
Color: 設定光暈的顏色可使用顏色名稱或代碼（例如 Red 或 #FF0000）
Strength: 設定光暈的範圍
Wave 波浪效果
filter: Wave(Add=數值, Freq=數值, LightStrength=數值, Phase=數值, Strength=數值);