如何將網頁內容套用CSS樣式呢？一般來說有三種方式，包括『連結外部樣式檔』、『內嵌宣告』及『行內宣告』等三種。簡略說明如下：
- 第一種是『連結外部樣式檔』：這種方式就是將CSS樣式表儲存成獨立的檔案(*.CSS)，然後在網頁程式碼中以連結之方式宣告。以圖1之內容來看，先將CSS樣式表儲存成『test.css』之檔案，然後在網頁程式碼中以連結之方式宣告，其連結之語法如下：
連結外部樣式檔之語法：<link rel=stylesheet type="text/css" href="test.css">
圖1 在網頁程式碼中以連結之方式宣告CSS樣式表
- 第二種是『內嵌宣告』，就係將CSS樣式表放在放在HTML程式碼的標頭(<head>標記)區域，也就是指<head>與</head>標記裡。圖2之內容中，<style type="text/css">與</style>標記係用來宣告CSS樣式表，其中『type』屬性是用來通知瀏覽器(IE、FIREFOX)這個宣告係使用CSS樣式。『內嵌宣告』之好處係可以該網頁裡的CSS樣式統一管理，但僅能套用於設定之網頁本身，如果要讓網站裡所有網頁都要使用相同的樣式，就必須要一頁一頁設定，所以碰到網頁頁面很多之網站時，此種作法會讓後續維修很麻煩，所以檔你製作之網站其頁面很多時，可以考慮『連結外部樣式檔』之方式。
圖2 『內嵌宣告』，將CSS樣式表放在放在HTML程式碼的標頭(<head>標記)區域
圖3 以圖2之內容製作之網頁內容(以瀏覽器執行之結果)
- 第三種是『行內宣告』，在HTML標記裡利用『style』屬性宣告CSS語法，並寫明『樣式規則』。此種方法適用在網頁內容中僅有少數HMTL程式碼需要套用CSS樣式。其輸入之語法如下：
<h1 style="font-family:Broadway BT";border:1px #FF00FF solid;">The honesty is the policy！</h1>
圖4為『行內宣告』之範例。由圖4之內容可以看到，其HTML程式碼中有二個<h1>標記，第一個<h1>標記有使用到『style』屬性，『style』屬性係用來宣告CSS樣式表，所以在網頁內容之呈現上，就有二種不同的樣式(示如圖5)。利用此種型式套用CSS樣式表，只對該行之程式碼有效，所以當有許多HTML程式碼都需要套用CSS樣式表時，不僅費時，也會讓網頁之程式碼看起來非常複雜，並且增加日後進行維護作業之困難度。
圖4 『行內宣告』之輸入語法
圖5 以圖4內容製作之網頁內容(以瀏覽器執行之結果)
【小提示：CSS全名為「串接式樣式表」，而且有三種套用之方法，表示是可串接使用的。但如果套用之CSS樣式表之內容有重複『樣式規則』時，優先之順序為『行內宣告』-->『內嵌宣告』-->『連結外部樣式檔』。】