CSS樣式可獨立設定在副檔名為css的檔案，然後在HTML文件使用<link>來參照。這外部CSS檔稱為外部樣式表(External style sheet)。
請先參考CSS 內部樣式表(Internal style sheet) 在HTML文件的<style>設定CSS。
建立一份welcome.html內容修改如下。請參考在Visual Studio Code建立第一個HTML文件。
welcome.html
<!DOCTYPE html><html><head></head><body> <h1>您好，歡迎光臨</h1> <p>普通段落文字</p> </body></html>
在瀏覽器開啟畫面如下。
到這裡為止HTML文件中的任何元素並未施加任何CSS設定。
在<head>...</head>間加入<link>標籤如下。
welcome.html
<!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <h1>您好，歡迎光臨</h1> <p>普通段落文字</p> </body></html>
<link>的屬性rel="stylesheet"與type="text/css"用來告訴瀏覽器所引入的資源是一個CSS樣式檔；href="style.css"告訴瀏覽器資源位址在同個檔案目錄的style.css。
總之用<link>引入外部樣式表時，記得加上rel="stylesheet"及type="text/css"是固定寫法。
<link rel="stylesheet" type="text/css" href="style.css">
外部樣式表檔名可以任意命名以副檔名css結尾的名稱，例如本範例為style.css。你也可以命名為mystyle.css，只要注意<link>的href屬性的參照位址是對應的檔名及可，也就是href="mystyle.css"。
接著建立style.css如下，並把檔案存在與welcome.html同個檔案目錄位置。
style.css
h1 { color:red;
}p { color:blue; background-color: yellow;
}上面的CSS設定使用「CSS選擇器(CSS selectors)」的元素選擇器(Type selector)h1及p把HTML文件中的<h1>元素文字顏色改為紅色(red)； 把<p>元素文字顏色改為藍色(blue)，背景顏色改為黃色(yellow)。
接著以瀏覽器開啟welcome.html，可以看到HTML文件有確實套用了外部樣式表style.css所設定的CSS效果。
以上即為使用CSS外部樣式表(External style sheet) 來改變HTML元素的樣式。
