前端的三大天王有 HTML、CSS 及 JavaScript，這個章節的重頭戲我們就放在 CSS 身上。
在之前的章節曾提到，網頁的樣式變化就猶如替素顏的臉上化妝，馬上就帶大家認識 CSS，它的全名是 Cascading Style Sheets，縮寫為 CSS。要開始寫 CSS 的前提是，會需要一個 HTML 的文件，你才有辦法將 CSS 的化妝效果呈現出來。
很多人會以為 CSS 其實只是改改顏色或文字大小，但它的難度其實是在於要把設計師的設計稿透過程式的方式呈現成網頁格式，而呈現出來的頁面可能會因為裝置的不同而有跑版的可能，為了讓網頁可以完美呈現在其他人面前，CSS 的複雜度相對比較高。
❏ CSS 語法
p {
color:red;
}
大家有沒有發現 CSS 的語法和 HTML 的標籤有那麼一點點不一樣？
CSS 會用 選取器（CSS selctor） 來讓你選取想要調整樣式的區塊，因此當你做頁面的變化時，才不會影響所有畫面。
從語法上面來看和解釋，我們會用中括號 {} 在裡面寫下我們希望這標籤做出什麼樣的改變。
而 color 是 屬性 的概念，意思是希望這個 p 標籤要做出顏色上變化，而冒號後面接的內容，我們稱職為 值，也就是我們希望 p 標籤變化的結果。
跟 HTML 一樣要使用符號來讓編輯器知道這個語法已經結束，因此在 CSS 裡就是使用 分號（；） 來告訴 CSS 這個樣式已經完結。
另一個大家容易發問的問題包含 CSS 語法是否會受大小寫影響，其實不管你用大寫或小寫描述都不太會出錯，但通常我們都會以小寫表示。
CodePen
CodePen 有劃分幾個欄位，就按照它提供的欄位放入對應的地方即可，就會讓網頁出現想要呈現的效果唷！
VScode
- 寫在同一個檔案
通常會把 CSS 寫在 HTML 的<head></head>標籤之間，並且將語法放在<style></style>內。
- 連出去外部文件
為了避免整個 HTML 的檔案寫得太過冗長，比較常用的方式，會寫一個新的 CSS 樣式文件（stylesheet），然後再會用連結的方式載入原本的 HTML 檔案。
或許用一個例子來說明你會更好懂，假設我在 VScode 開了一個新的頁面要來放 CSS 效果，另存檔名為 01，附檔格式為 .css，接著我們就會在 html 的 <head></head> 之間裡加入了以下這段：
整個語法指得是，藉由 style 的標籤，連出去一個叫做 01.css 的樣式表。
這樣的寫法的好處是透過獨立的 CSS 頁面，可以讓 HTML 的頁面檔案相對變得簡潔易於維護。
小結
以上兩種方式都可以讓 CSS 效果正常發揮，基於開發上的好維護原則，常會使用上述的第 2 種方式，將 CSS 寫在另外一個文件，在 HTML 的標籤內用 link 的方式將樣式導入。
延伸閱讀
👩🏫 課務小幫手：
✨ 想掌握 HTML/CSS 的觀念和原理嗎？
我們有開設新手也能輕鬆掌握 HTML、CSS！和前進網頁進階實戰唷 ❤️️